jQuery插件中validate的使用

最新推荐文章于 2021-01-01 16:47:36 发布

liu_111111

最新推荐文章于 2021-01-01 16:47:36 发布

阅读量2.3k

点赞数

分类专栏： jQuery 文章标签： jQuery插件 jQuery

本文链接：https://blog.csdn.net/liu_111111/article/details/8896300

版权

jQuery 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

•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>

liu_111111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件中validate的使用

•validate简介：–自带验证规则，包括必填，数字，url等–验证提示信息(就是验证失败时候的提示信息，要想显示中文需要插件支持)–多种事件触发，不仅可以在提交(单击submit类型的按钮)时，还可以在keyup,blur事件中触发验证–4.允许自定义验证规则•validate使用方法:–引入Jquery包–引入jquery.va
复制链接

扫一扫