jQuery validate 添加表单验证方法

给表单参数添加验证（jQuery库的使用）

准备工作：

引入jQuery库
引入bootstrap库
引入jQuery validate库

js文件：

var Register = function() {return {// main function to initiate the moduleinit : function() {// 字符验证   jQuery.validator.addMethod( "stringCheck", function(value, element) {      return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);      }, "只能包括中文字、英文字母、数字和下划线" );// 手机号码验证      jQuery.validator.addMethod( "isMobile", function(value, element) {      var length = value.length;  var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ ;  return this .optional(element) || (length == 11 && mobile.test(value));      }, "请正确填写您的手机号码" );  // 密码验证   jQuery.validator.addMethod( "isPassword", function(value, element) {      var mobile = /^[A-Za-z0-9]+$/ ;  return this .optional(element) || mobile.test(value);      }, "密码只能包括数字和字母" );//显示验证$( '.register-form').show();$( '.register-form').validate({errorElement : 'label', // default input error message containererrorClass : 'help-inline', // default input error message classfocusInvalid : false, // do not focus the last invalid inputignore : "",rules : {userName : {required : true,rangelength : [fields.min_username_length,fields.max_username_length],// 用户名长度在3~64之间stringCheck : true,remote : { //异步发送请求到服务器，验证userNametype : "post",//url : "/adminUser/authName.do",//需要服务器controllor 中提供用户名检查的方法data : {userName : function() {return $("#userName").val();}},}},password : {required : true,minlength : fields.min_password_length,maxlength : fields.max_password_length,isPassword : true},passwordConfirm : {equalTo : "#register_password" ,},mailbox : {required : true,email : true},nickName : {maxlength : fields.max_nickname_length,},phone : {required : true,number : true,minlength : fields.phonenum_length,isMobile : true},},messages : { // 定义验证信息userName : {required : "用户名必填" ,rangelength : $.validator.format("输入的范围在 {0}-{1} 之间的数字、字符、下划线." ),remote :  "用户名存在" ,// 返回false时的提示信息},password : {required : "密码必填" ,minlength : "您输入的数字或者字符太少，最少为6" ,maxlength : "密码不能超过16位" ,},passwordConfirm : {equalTo : "两次输入的密码不一致" ,},mailbox : {required : "邮箱必填" ,email : "您输入的邮箱不合法，请重新输入" ,},nickName : {maxlength : "您输入的昵称已经给你超过最大长度20" ,},phone : {required : "手机号必填" ,number : "手机号只能是数字" ,minlength : "您输入的手机号长度不正确" ,}},invalidHandler : function(event, validator) { // display error alert on form submit},highlight : function(element) { // hightlight error inputs$(element).closest( '.control-group').addClass('error' ); // set errorclass to the control group},success : function(label) {label.closest( '.control-group').removeClass('error' );label.remove();},onsubmit: false,//默认表单提交});}};
}();

调用的方法( HTML中)

<form class= "form-vertical register-form" action="/adminUser/register.do" method="post"><input type= "hidden" id ="hiddenSpace" /><h3 class= "">用户注册 </h3><!-- 返回錯誤提示信息 --><div><c:choose><c:when test= "${ response.result == 'true' }" ></c:when><c:otherwise><span class="register_error" >${ response.message} </span></c:otherwise></c:choose></div><!-- 返回錯誤提示信息 --><div class= "control-group"><label class= "control-label visible-ie8 visible-ie9"> 用户名</label ><div class= "controls"><div class= "input-icon left"><i class= "icon-user"></i > <input class= "m-wrap placeholder-no-fix" type="text" placeholder="用户名" name="userName" id= "userName" /></div><span id= "namespan"></span ></div></div><div class= "control-group"><label class= "control-label visible-ie8 visible-ie9"> 密码</label ><div class= "controls"><div class= "input-icon left"><i class= "icon-lock"></i > <input class= "m-wrap placeholder-no-fix" type="password" id="register_password" placeholder= "密码" name ="password" /></div></div></div><div class= "control-group"><label class= "control-label visible-ie8 visible-ie9"> 再次输入密码</label ><div class= "controls"><div class= "input-icon left"><i class= "icon-ok"></i > <input class= "m-wrap placeholder-no-fix" type="password" placeholder="确认密码" name="passwordConfirm" /></div></div></div><div class= "control-group"><!--ie8, ie9 does not support html5 placeholder, so we just show field title for that--><label class= "control-label visible-ie8 visible-ie9"> 邮箱</label ><div class= "controls"><div class= "input-icon left"><i class="icon-envelope" ></i> < input class ="m-wrap placeholder-no-fix" type= "text" placeholder ="邮箱" name="mailbox" /></div></div></div><div class= "control-group"><label class= "control-label visible-ie8 visible-ie9"></ label><div class= "controls"><div class= "input-icon left"><i class= "icon-cloud"></i > <input class= "m-wrap placeholder-no-fix" type="text" placeholder="昵称" name="nickName" /></div></div></div><div class= "control-group"><label class= "control-label visible-ie8 visible-ie9"></ label><div class= "controls"><div class= "input-icon left"><i class= "icon-phone"></i > <input class= "m-wrap placeholder-no-fix" type="text" placeholder="手机号" name="phone" /></div></div></div><div class= "form-actions"><button type= "submit" id="register-submit-btn" class="btn green pull-right">注册 <i class= "m-icon-swapright m-icon-white"></ i></button></div></form>

以及对js文件的引入：

  <script >jQuery(document).ready( function() {App.init();Register.init();});    </script >

参考文档：
http://blog.csdn.net/qinnimei/article/details/51074797

jQuery validate 添加表单验证方法相关推荐

bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
使用 jQuery Validate 进行表单验证
jQuery Validate简介 jQuery Validate 插件提供了强大的表单验证功能,能够让客户端表单验证变得更简单,同时它还提供了大量的可定制化选项,以满足应用程序的各种需求.该插件捆绑 ...
jQuery Validate 提交表单验证失败扩展方法
由于Validate没有提供表单提交过后,验证不通过触发方法.这里做一下扩展. 引用场景:每次提交表单元素验证不通过触发方法打开源代码找到focusInvalid 方法, 这里是提交表单时验证不通 ...
JQuery.validate.js 表单验证
官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassistance.d ...
Flask项目实战——6—(前台用户模型、前台登录注册、图形验证码、手机短信验证码、添加表单验证短信验证码请求)
1.前台用户模型前台用户模型定义创建前台模型文件 apps/front/models.py # -*- encoding: utf-8 -*- """ @File : ...
2013年jQuery Validation Engine 表单验证
目录(?)[-] options 参数说明可选使用方法载入 CSS 文件载入 JavaScript 文件给表单加上 ID 给控件加上 ID 及设置验证类型设置验证验证类型 API 方法 ...
jquery validation Engine表单验证
jQuery Validation Engine 表单验证来源功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外, ...
自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
Spring MVC和JQuery用于Ajax表单验证
在本教程中,我们将看到如何使用Ajax和Spring MVC和JQuery在服务器端验证表单. Spring MVC为通过注释驱动的配置采用Ajax提供了非常方便的过程. 我们将使用此注释驱动的配置以 ...
php ci框架自动验证,CodeIgniter表单验证方法实例详解
本文实例讲述了CodeIgniter表单验证方法.分享给大家供大家参考,具体如下: 1.在D:\CodeIgniter\system\application\views目录下写一个视图文件myform ...

jQuery validate 添加表单验证方法

给表单参数添加验证（jQuery库的使用）

准备工作：

js文件：

调用的方法( HTML中)

以及对js文件的引入：

jQuery validate 添加表单验证方法相关推荐

最新文章

热门文章