jQuery插件中validate的使用 -

mywebcode

浏览: 998155 次

最近访客更多访客>>

u012363178

qq_33632159

cshui

dd_9921

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2181)

社区版块

存档分类

2014-04 ( 138)
2014-03 ( 64)
2014-02 ( 54)
更多存档...

jQuery插件中validate的使用

•validate简介：

–自带验证规则，包括必填，数字，url等

–验证提示信息(就是验证失败时候的提示信息，要想显示中文需要插件支持)

–多种事件触发，不仅可以在提交(单击submit类型的按钮)时，还可以在keyup,blur事件中触发验证

–4.允许自定义验证规则

•validate使用方法:

–引入Jquery包

–引入jquery.validate.js

–引入messages_cn.js

–为表单定义一个id

–为需要验证的控件定义name属性，并赋值，此插件使用的是控件的name属性，而非id

必须先引入Jquery，否则会报错"jQuery未定义"

$('#fmv').validate({

rules: {

username: { required: true, minlength:}, //username是表单中name属性是username

email: { required: true, email: true } //email是表单中name属性是username

errorshow: function (error, element) {

error.appendTo(element.siblings('span'));

}

})

•使用上面的代码进行验证：

–rules:声明验证规则，此为关键字，不能写错

–username和email:控件的name属性的值

–errorshow：表示错误处理，可以自定义名字

–error:错误信息

–element:错误元素

validate内置验证规则

•required:true 必输字段

•remote:"check.php" 使用ajax方法调用check.php验证输入值

•email:true 必须输入正确格式的电子邮件

•url:true 必须输入正确格式的网址

•date:true 必须输入正确格式的日期

•dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性

•number:true 必须输入合法的数字(负数，小数)

•digits:true 必须输入整数

•creditcard: 必须输入合法的信用卡号

•equalTo:"#field" 输入值必须和#field相同

•accept: 输入拥有合法后缀名的字符串（上传文件的后缀）

•maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

•minlength:10 输入长度最小是10的字符串(汉字算一个字符)

•rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

•range:[5,10] 输入值必须介于 5 和 10 之间

•max:5 输入值不能大于5

•min:10 输入值不能小于10

下面是这些验证的使用：

<head>
<title></title>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#form1').validate({
rules: {
txtUserName: { required: true, minlength: 6, maxlength: 16 },
txtPassword1: { required: true, rangelength: [6, 6] },
txtPassword2: { required: true, equalTo: "#txtPassword1", rangelength: [6, 6] },
txtDefault: { required: true, url: true },
txtDate: { required: true, dateISO: true },
txtBlood: { required: true, digits: true }
}
})
})
</script>
</head>
<body>
<form id="form1">
<table>
<tr>
<td>
用户名
</td>
<td>
<input name="txtUserName" type="text" />
</td>
<td>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input name="txtPassword1" id="txtPassword1" type="text" />
</td>
<td>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input name="txtPassword2" type="text" />
</td>
<td>
</td>
</tr>
<tr>
<td>
主页
</td>
<td>
<input name="txtDefault" type="text" />
</td>
<td>
</td>
</tr>
<tr>
<td>
生日
</td>
<td>
<input name="txtDate" type="text" />
</td>
<td>
</td>
</tr>
<tr>
<td>
血压
</td>
<td>
<input name="txtBlood" type="text" />
</td>
<td>
</td>
</tr>

<tr>
<td colspan="3" align="center">
<input id="Submit1" type="submit" value="提交" />
</td>
</tr>
</table>
</form>
</body>

分享到：