<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrong{ color: red; } </style> <script src="jquery-1.9.1.js"></script> <script src="jquery.validate.min.js"></script>
<script> $(function () { $("#mgForm").validate({ rules:{//date 日期 email 。com cn org net username:{ //指的是input中name的名字 required:true, minlength:6, maxlength:10 }, age:{// range:[18,80] required:true, PostCode:true }, password:{ required:true, rangelength:[2,6] }, password1:{ equalTo:"#pass" }, email:{ email:true } }, messages:{ username:{ required:"*此项必填", minlength:"*用户名最小是6位", maxlength:"*用户名最大是10位" }, age:{// range:"*年龄必须在18-80之间" PostCode:"错误" }, password:{ required:"*必填", rangelength:"2-6" }, password1:{ equalTo:"*密码不一致" }, email:{ email:"*邮箱格式不正确" } }, submitHandler:function () { alert("全部通过") }, errorClass:"wrong",// ignore:"#pass1",//忽略密码不一 errorElement:"div",//改变错误提示的标签 focusInvalid:true, focusCleanup:true, highlight:function (element,errorClass) { $(element).addClass(errorClass); $(element).fadeOut().fadeIn() } }); $.validator.addMethod("PostCode",function () { var reg=/^[0-9]{6}$/; return reg.test(value) },"邮编输入不正确");// invalidHandler:function () {// console.log(validator.numberOfInvalids())// }
}); </script>
</head><body><form action="" id="mgForm"> <div> <label for="user">username:</label> <input type="text" name="username" id="user"> </div>
<div> <label for="pass">password:</label> <input type="text" name="password" id="pass"> </div> <div> <label for="pass1">form-password:</label> <input type="text" name="password1" id="pass1"> </div> <div> <label for="age">age:</label> <input type="text" name="age" id="age"> </div> <div> <label for="email">email:</label> <input type="text" name="email" id="email"> </div>
<input type="submit" value="提交"> <!--<input type="button" value="校验" id="aaa">--></form></body></html>上面就是表单校验的一些代码首先表单校验按钮的type值必须是submit而且是要写在form表单标签中的给form标签一个id通过获取id来执行validate方法rules是自定义的验证规则
username:{ //指的是input中name的名字 required:true, minlength:6, maxlength:10}是relus下边写的东西username是input文本框中name的名字required是必须执行的东西而后面也必须写trueminlength是最少有几位maxlength是最多有几位rangelength[n,n]是设置一个长度范围email是验证电子邮箱格式冒号后面必须跟truerange是设置值的范围date验证日期格式是否正确dateISO验证ISO的日期格式是否正确
messages是自定义的错误提示信息也是在messgaes下面写文本框的name值然后写上面的这些东西后面跟上错误时的提示信息好比这样
username:{ required:"*此项必填", minlength:"*用户名最小是6位", maxlength:"*用户名最大是10位"}如果文本框多的话可以在花括号后面写个逗号接着在下面写
submitHandler:function () {}
这个函数是如果校验结果正确的话需要执行的函数在这个函数里可以写好多东西可以把填入进去的数据添加到后台里
errorClass:""给提示信息添加类名然后给他设置css样式
errorElement:"div"错误时的提示信息是默认创建一个标签这行代码可以改变他默认创建的标签
highlight:function (element,errorClass) { $(element).addClass(errorClass); $(element).fadeOut().fadeIn()}这个函数是当不满足条件的时候文本款会有一个闪动的效果
$.validator.addMethod("PostCode",function () { var reg=/^[0-9]{6}$/; return reg.test(value)},"邮编输入不正确");这个是一个自定的的校验方法通过在上面rules和essages中调用他的第一个参数来执行校验这就是表单校验的一些方法吧比正则简单一些吧
时间： 2024-12-04 14:51:18