jquery验证大全
来源:互联网 发布:c语言逻辑或运算 编辑:程序博客网 时间:2024/06/05 09:21
jQuery验证及限制
绑定键盘监听事件
$(document).on("keypress", ".txt-valid-len", function (e) { return (this.value.length < $(this).attr("maxlength")); });
输入框设置
- 然后我们只需要在input中添加txt-valid-len这个class属性。并且加入maxlength属性指定长度就可以了。
<input type="text" id="user_name" name="name" class="form-control txt-valid-len" maxlength="11" />
- 上面的代码的意思就是这个输入框长度限制在11位,超过11位就不显示了。如果想在超过11位进行提示。可以扩展上面的监听事件。
jquery表单提交验证
- 在开发中我们前台经常需要在与后台交互前进行相关数据的验证。这样可以减少服务端的压力。下面我们来看看jquery给我们提供的表单验证的方法。
引入脚本文件
jquery.min.jsjquery.validate.js
这两个js在官网的jQuery中都是包含的,直接下载引入就行了。
有了这两个js我们还需要页面上的form表单。表单就是我们平常的表单。
<form id="myform" method="post" action="#"> <p> <label for="myname">用户名:</label> <!-- id和name最好同时写上 --> <input id="myname" name="myname" /> </p> <p> <label for="age">年龄:</label> <input id="age" name="age" /> </p> <p> <label for="email">E-Mail:</label> <input id="email" name="email" /> </p> <p> <label for="password">登陆密码:</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">确认密码:</label> <input name="confirm_password" type="password" /> </p> <p> <input class="submit" type="submit" value="立即注册" /> </p></form>
自定义js实现表单验证(利用jQuery提供内置方法)
- 首先我们通过jQuery提供的选择器找到我们需要验证的表单
$("#myform").validate();
- 就这样我们就完成了表单验证。当然啦,到这里只是架子打好了。下面我们开始在validate中填写我们的验证规则了。
$("#myform").validate({ debug: true, //调试模式取消submit的默认提交功能 //errorClass: "label.error", //默认为错误的样式类为:error focusInvalid: false, //当为false时,验证无效时,没有焦点响应 onkeyup: false, submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form alert("提交表单"); form.submit(); //提交表单 }, rules:{ myname:{ required:function(element){ if( $("#age").val() < 13){ return true; } else{ return false; } } }, email:{ required:true, email:true }, password:{ required:true, rangelength:[3,10] }, confirm_password:{ equalTo:"input[name=password]" } }, messages:{ myname:{ required:"必填" }, email:{ required:"<span style='color:red;'>只允许输入整数。</span>", email:"E-Mail格式不正确" }, password:{ required: "不能为空", rangelength: $.validator.format("密码最小长度:{0}, 最大长度:{1}。") }, confirm_password:{ equalTo:"两次密码输入不一致" } } });
- 其中的rules就是我们验证规则内容。其中的myname,email…是我们form需要验证的控件的name属性值(并不是ID属性值),还有我们的提示信息可以做的花哨一点加入样式
<span style='color:red;'>只允许输入整数。</span>
- 至于这些验证规则我们可以在jquery-validate.js中找到。里面messages属性的提示信息我们都是可以用来做验证的.
动态决定验证规则
- 上面的myname的required的验证是根据id=age的input框的值得变化决定的,就是说你输入的年龄小于13岁myname是需要验证的。大于则反之。如果你想做的像更美化我们可以在年龄input中绑定一个失去焦点的时间(blur),在输入完年龄我们就立马去验证myname的input框的规则,通过调用
$("#myname").valid();
- 就会去按照我们的规则去验证myname这个字段的input的值。
通过远程进行验证
前台
- 对上面的进行如下的修改,其中remote就是我们的远程请求,该请求返回的true,则验证通过,false反之。
$("#myform").validate({ rules: { email: { required: true, email: true, remote: { type:"post", dataType: "json", contentType : "application/json", url:"/adminManage/email.bsh" } } } });
后台
- 这的注意的是remote这里的请求格式有些要求,这个url返回的数据必须是json格式的。但是后台只能返回string或者boolean类型的数据。如果返回的是string内容的json,那么string是true则验证通过,若果不是true则验证提示就是你返回的string内容。如果是boolean,是true则验证通过,false验证失败。
@RequestMapping("/email.bsh") @ResponseBody public Object email(HttpServletRequest request,HttpServletResponse response) { return "已经存在"; }
- 前台提示已经存在,会覆盖前台默认的提示内容
@RequestMapping("/email.bsh")@ResponseBodypublic Object email(HttpServletRequest request,HttpServletResponse response) { return "true";}
- 验证通过
@RequestMapping("/email.bsh")@ResponseBodypublic Object email(HttpServletRequest request,HttpServletResponse response) { return true;}
- 验证通过
@RequestMapping("/email.bsh")@ResponseBodypublic Object email(HttpServletRequest request,HttpServletResponse response) { return false;}
- 验证失败,前台将提示默认的信息
参考网址
验证提示信息的显示位置
- 在上面一节我们详细介绍了验证的规则及提示实现。那么提示信息的位置有时候也是很重要的,我们控制的好的话界面会很美观的。
var validator = $("#myform").validate({ debug: true, //调试模式取消submit的默认提交功能 errorClass: "haha",//默认为错误的样式类为:error focusInvalid: false, onkeyup: false, submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form alert("提交表单"); //form.submit(); 提交表单 }, rules: { //定义验证规则,其中属性名为表单的name属性 username: { required: true, minlength: 2, remote: "uservalid.jsp" //传说当中的ajax验证 }, firstpwd: { required: true, //minlength: 6 rangelength: [6,8] }, secondpwd: { required: true, equalTo: "#password" }, sex: { required: true }, age: { required: true, range: [0,120] }, email: { required: true, email: true }, purl: { required: true, url: true }, afile: { required: true, accept: "xls,doc,rar,zip" } }, messages: { //自定义验证消息 username: { required: "用户名是必需的!", minlength: $.format("用户名至少要{0}个字符!"), remote: $.format("{0}已经被占用") }, firstpwd: { required: "密码是必需的!", rangelength: $.format("密码要在{0}-{1}个字符之间!") }, secondpwd: { required: "密码验证是必需的!", equalTo: "密码验证需要与密码一致" }, sex: { required: "性别是必需的" }, age: { required: "年龄是必需的", range: "年龄必须介于{0}-{1}之间" }, email: { required: "邮箱是必需的!", email: "请输入正确的邮箱地址(例如 myemail@163.com)" }, purl: { required: "个人主页是必需的", url: "请输入正确的url格式,如 http://www.domainname.com" }, afile: { required: "附件是必需的!", accept: "只接收xls,doc,rar,zip文件" } }, errorPlacement: function(error, element) { //验证消息放置的地方 error.appendTo( element.parent("td").next("td") ); }, highlight: function(element, errorClass) { //针对验证的表单设置高亮 $(element).addClass(errorClass); }, success: function(label) { label.addClass("valid").text("Ok!") } /*, errorContainer: "#error_con", //验证消息集中放置的容器 errorLabelContainer: "#error_con ul", //存放消息无序列表的容器 wrapper: "li", //将验证消息用无序列表包围 validClass: "valid", //通过验证的样式类 errorElement: "em", //验证标签的名称,默认为:label success: "valid" //验证通过的样式类 */ });
重构规则
不论什么时候,当你的表单中的多个字段含有相同的验证规则及验证消息,重构规则可以减少很多重复。使用 addMethod 和 addClassRules 将非常有效果。
假使已经重构了如下规则:
// alias required to cRequired with new message $.validator.addMethod("cRequired", $.validator.methods.required, "Customer name required"); // alias minlength, too $.validator.addMethod("cMinlength", $.validator.methods.minlength, // leverage parameter replacement for minlength, {0} gets replaced with 2 $.format("Customer name must have at least {0} characters")); // combine them both, including the parameter for minlength $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 }); <input name="customer1" class="customer" /> <input name="customer2" class="customer" /> <input name="customer3" class="customer" />
adMethod
addMethod( name, method, [message] )
返回:undefined
参数 name 类型:String
要添加的方法名,用于标识和引用,必须是一个有效的javascript标识符。
参数 method 类型:Callback 方法的实现部分,返回true如果表单元素通过验证。
参数 message(Optional) 类型:String, Function 该方法的默认验证消息。可以用 jQuery.validator.format(value) 方法创建。如果未定义该参数,则使用本地已存在的验证消息,另外,必须为指定的表单元素定义验证消息。
说明:添加一个用户自定义的验证方法。它由方法名(必须是一个合法的javascript标识符)、基于javascript的函数及默认的验证消息组成。
addClassRules( name, rules )
返回:undefined
参数 name 类型:String 要添加的样式规则名。
参数 rules 类型:Options 规则选项。
说明:添加一个复合的样式验证方法。对于将多个联合使用的规则重构进单个样式中非常有用。
- jquery验证大全
- Jquery validate 表单验证大全
- Jquery Validate 正则表达式实用验证代码大全
- Jquery Validate 正则表达式实用验证代码大全
- 验证大全
- jQuery 大全
- JQuery大全
- jquery大全
- jQuery大全
- jquery 验证
- jquery 验证
- 验证jquery
- jquery验证
- Jquery验证
- jquery 验证
- jquery验证
- jquery 验证
- jQuery验证
- Android5.0编写hello从APP->framework->jni->hal->驱动的BUG
- 适配器模式(Adapter):类适配器、对象适配器
- 【BZOJ 1022】 [SHOI2008]小约翰的游戏John
- 计算密集型&IO密集型
- 通讯录的常用功能保存
- jquery验证大全
- 简单编码(java语言把数字转换成单个字符)
- 复杂网络社区结构发现算法-基于python networkx clique渗透算法
- 看程序员的呐喊有感
- ExecutorService的正确关闭方法
- linux学习之:创建lvm磁盘
- SMO算法介绍
- spring zuul的日志配置
- hibernate -- HQL语句总结