一、官网下载地址:http://plugins.jquery.com/validate/
二、用法
1.在页面上进行引用
<script src="~/scripts/jquery-1.10.2.min.js"></script> <script src="~/scripts/jquery.validate.js"></script>
2.写验证规则(标红的"myForm"是要提交表单的ID名称,剩下的标红字体则对应的是需要验证文本框的name属性名称)
1 $(function () { 2 //验证规则 3 $('#myForm').validate({ 4 debug: true, 5 onkeyup: null, 6 rules: { 7 university: { 8 required:true 9 }, 10 age: { 11 required: true, 12 number:true 13 }, 14 email: { 15 required: true, 16 email:true 17 } 18 }, 19 messages: { 20 university: { 21 required:"请输入学校名称!" 22 }, 23 age: { 24 required: "请输入年龄!", 25 number:"年龄必须是数字!" 26 }, 27 email: { 28 required: "请输入邮箱", 29 email:"请输入邮箱格式" 30 } 31 } 32 }) 33 })
3.验证之后的操作
实现效果:点击提交------进行验证---验证成功(进行下一步的操作)
a.方法一:为提交按钮绑定点击事件($('#myForm').valid()方法来验证表单是否验证成功,返回布尔值)
$('#submitBtn').on('click', function () { //获取表单验证状态 var isValidate = $('#myForm').valid(); if(isValidate) {
alert("验证成功"); } })
按钮的html代码如下:
<p><button id="submitBtn" type="button" value="提交">提交</button></p>
b.方法二:通过设置默认属性,来设置验证后运行的函数
$.validator.setDefaults({ submitHandler: function () { alert("验证成功"); } })
其中要将提交按钮设置为submit类型
<p><button id="submitBtn" type="submit" value="提交">提交</button></p>
4.页面效果
只需要加上如下样式即可:
1 <style> 2 /*验证错误样式*/ 3 input.error { 4 border: 1px solid red; 5 } 6 label.error { 7 color: red; 8 margin-left: 5px; 9 } 10 </style>