注:必须配合jq使用。
基本语法 例如有如下:
<form action="" method="post" id="demoForm"> <p> <label name="email">email:</label> <input type="text" id="email" value="" name="email1"/> </p> <p> <label name="pasword1">password:</label> <input type="text" id="password1" value="" name="pass1"/> </p> <p> <label name="pasword2">confirm-password:</label> <input type="text" id="password2" value="" name="pass2"/> </p> <p> <input type="submit" id="btn" name="" /> </p> </form>
基本类型:
$(function(){ $("#demoForm").validate({ rules:{ //指定元素对应的规则 }, messages:{ //如果不符合要求时要提示的信息 }, }) })
属性:
require :true 必填 布尔类型 rangelength:[2,6] 长度范围 equalTo 保证两次密码一致 email: true 布尔类型 submitHandler:function(){ //校验通过时可执行的东西 } invalidHander:function(){ 校验通不过时可执行 } focusInvalid : true 布尔 提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 focusCleanup : false 默认 当未通过验证的元素获得焦点时,并移除错误提示 (避免和 focusInvalid.一起使用) errorElement:'div'将错误信息放在什么地方 errorClass:'worng' 可给错误信息添加一个类名 通过类名可给错误信息修饰样式 highlight:function(element,erroeClass){ $(element).addClass(errorClass); $(element).fadeOut().fadeIn(); } 出错时的样式设置
minlength : num 最小值 maxlength: num 最大值 digits:true 年龄必须为正整数 range:[]范围 date:true 日期格式要求较宽泛 dateISO:true; 日期规范较严格
jq 表单验证插件不仅可以在数据获取之前在前端做首要的的判断,还通过submintHandler:这个属性通过ajax获取数据
ajax获取数据的同时结合php接口对数据进行添加至数据库