溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了jquery表單驗證插件怎么在Yii框架中使用，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
視圖層：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style>
.error{
color: red;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script>
<script>
// 手機號碼驗證
jQuery.validator.addMethod("phone", function(value, element) {
var length = value.length;
var mobile = /^1[3,5,8][0-9]{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "請正確填寫您的手機號碼");
// 漢字
jQuery.validator.addMethod("uName", function(value, element) {
var name= /^[\u4e00-\u9fa5]{2,6}$/;
return this.optional(element) || (name.test(value));
}, "請輸入2-4個漢字");
//驗證郵箱
jQuery.validator.addMethod("email1", function(value, element) {
var email= /^\w+@\w+[.]com|cn|net$/;
return this.optional(element) || (email.test(value));
}, "請正確填寫您的郵箱");
//驗證名稱是否重復（唯一性）
jQuery.validator.addMethod("onlyUsername", function(value, element) {
return eval($.ajax({
url: "index.php?r=login/only",
type: 'get',
async: false,
data: {
u_name:value
}
}).responseText);
}, "用戶名已存在");
//驗證郵箱是否重復
jQuery.validator.addMethod("only2", function(value, element) {
return eval($.ajax({
url: "index.php?r=login/only2",
type: 'get',
async: false,
data: {
email:value
}
}).responseText);
}, "郵箱已存在");
$.validator.setDefaults({
submitHandler: function() {
form.submit();
}
});
//表單驗證
$().ready(function() {
// 在鍵盤按下并釋放及提交后驗證提交表單
$("#signupForm").validate({
rules: {
u_name: "required",
u_name: {
required: true,
uName: true,
onlyUsername: true
},
pwd: {
required: true,
minlength: 5
},
fruit:{
required: true,
minlength: 2
},
phone: {
required: true
},
email: {
required: true,
email: true,
email1:true,
only2:true
},
sex:
{
required:true,
minlength:1
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
u_name: "請輸入您的名字",
u_name: {
required: "請輸入用戶名",
uName: "用戶名必需由2-6個漢字組成",
onlyUsername:"用戶必須唯一"
},
pwd: {
required: "請輸入密碼",
minlength: "密碼長度不能小于 5 個字母"
},
phone: {
required: "請輸入手機號"
},
email: {
required:"請輸入一個正確的郵箱",
only2:"郵箱必須唯一"
},
agree: "請接受我們的聲明",
topic: "請選擇兩個主題",
sex: "請至少選一個",
fruit:"請至少選兩個水果"
}
});
});
</script>
</head>
<body>
<center>
<form class="cmxform" id="signupForm" method="post" action="index.php?r=login/register">
<fieldset>
<legend>注冊頁面</legend>
<p>
<label for="u_name">名字</label>
<input id="u_name" name="u_name" type="text">
</p>
<p>
<label for="pwd">密碼</label>
<input id="pwd" name="pwd" type="pwd">
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="phone">手機號</label>
<input id="phone" name="phone" type="phone">
</p>
<p>
<input type="radio" id="sex" value="男" name="sex" />男
<input type="radio" id="sex" value="女" name="sex"/>女
</p>
<p>
<select id="fruit" name="fruit[]" multiple="multiple">
<option value="b">Banana</option>
<option value="a">Apple</option>
<option value="p">Peach</option>
<option value="t">Turtle</option>
</select>
</p>
<p>
<label for="agree">請同意我們的聲明</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<label for="newsletter">我樂意接收新信息</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
</p>
<fieldset id="newsletter_topics">
<legend>注意：如果沒有勾選“我樂意接收新信息”以下選項會隱藏，但我們這里作為演示讓它可見</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="學習" name="topic[]">學習
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="唱歌" name="topic[]">唱歌
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="跳舞" name="topic[]">跳舞
</label>
<label for="topic" class="error">Please select at least two topics you'd like to do.</label>
</fieldset>
<p>
<input class="submit" type="submit" value="注冊">
</p>
</form>
</center>
</body>
</html>控制器（驗證唯一性）：
//驗證姓名唯一性
public function actionOnly(){
$u_name=Yii::$app->request->get('u_name');
$login=Yii::$app->db;
//查詢數據
$sql="select * from login where u_name='$u_name'";
$res=$login->createCommand($sql)->execute();
if($res)
{
echo false;
}
else
{
echo true;
}
}上述內容就是jquery表單驗證插件怎么在Yii框架中使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
