本文实例讲述了yii框架中jquery表单验证插件用法。分享给大家供大家参考，具体如下：
运行效果图如下：
视图层：
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta>
<title></title>
<style>
.error{
color: red;
}
</style>
<script></script>
<script></script>
<script></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><center>
<form>
<fieldset>
<legend>注册页面</legend>
<p>
<label>名字</label>
<input>
</p>
<p>
<label>密码</label>
<input>
</p>
<p>
<label>Email</label>
<input>
</p>
<p>
<label>手机号</label>
<input>
</p>
<p>
<input>男
<input>女
</p>
<p>
<select>
<option>Banana</option>
<option>Apple</option>
<option>Peach</option>
<option>Turtle</option>
</select>
</p>
<p>
<label>请同意我们的声明</label>
<input>
</p>
<p>
<label>我乐意接收新信息</label>
<input>
</p>
<fieldset>
<legend>注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
<label>
<input>学习
</label>
<label>
<input>唱歌
</label>
<label>
<input>跳舞
</label>
<label>Please select at least two topics you'd like to do.</label>
</fieldset>
<p>
<input>
</p>
</fieldset>
</form>
</center>
控制器（验证唯一性）：
//验证姓名唯一性
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;
}
}
希望本文所述对大家基于Yii框架的PHP程序设计有所帮助。
更多Yii框架中jquery表单验证插件用法示例相关文章请关注PHP中文网！
