spring mvc + 表单异步验证插件 Validate.form.js

最新推荐文章于 2022-08-13 12:24:19 发布
最新推荐文章于 2022-08-13 12:24:19 发布
阅读量1.4k 收藏
点赞数

Refer from http://blog.csdn.net/yangxuan0261/article/details/10033537


很好用的表单异步验证插件，很多时候都是在注册的时候用。

看下效果图



使用方式

html页面

[html]  view plain  copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>jquery实现网站注册页面验证信息</title>  
  6. <link href="css/style.css" type="text/css" rel="stylesheet" />  
  7. <script type="text/javascript" src="js/jquery.js"></script>  
  8. </head>  
  9. <body>  
  10.   
  11. <div id="formbox">  
  12.   <form id="formpersonal" method="post" onsubmit="return false;">  
  13.     <div class="form">  
  14.       <h3>帐户信息</h3>  
  15.       <div class="item"> <span class="label"><span class="red">*</span>用户名：</span>  
  16.         <div class="fl">  
  17.           <input type="text" id="username" name="username" class="text" tabindex="1" />  
  18.           <label id="username_succeed" class="blank"></label>  
  19.           <span class="clear"></span>  
  20.           <div id="username_error"></div>  
  21.         </div>  
  22.       </div>  
  23.       <!--item end-->  
  24.       <div id="o-password">  
  25.         <div class="item"> <span class="label"><span class="red">*</span>设置密码：</span>  
  26.           <div class="fl">  
  27.             <input type="password" id="pwd" name="password" class="text" tabindex="2"/>  
  28.             <label id="pwd_succeed" class="blank"></label>  
  29.             <input type="checkbox" class="checkbox" id="viewpwd"/>  
  30.             <label class="ftx23" for="viewpwd">显示密码字符</label>  
  31.             <span class="clear"></span>  
  32.             <label class="hide" id="pwdstrength"><span class="fl">安全程度：</span><b></b></label>  
  33.             <label id="pwd_error"></label>  
  34.           </div>  
  35.         </div>  
  36.         <!--item end-->  
  37.         <div class="item"> <span class="label"><span class="red">*</span>确认密码：</span>  
  38.           <div class="fl">  
  39.             <input type="password" id="pwd2" name="password2" class="text" tabindex="3"/>  
  40.             <label id="pwd2_succeed" class="blank"></label>  
  41.             <span class="clear"></span>  
  42.             <label id="pwd2_error"></label>  
  43.           </div>  
  44.         </div>  
  45.         <!--item end-->  
  46.       </div>  
  47.       <!--o-password end-->  
  48.       <div class="item"> <span class="label"><span class="red">*</span>邮箱：</span>  
  49.         <div class="fl">  
  50.           <input type="text" id="mail" name="mail" class="text" tabindex="4"/>  
  51.           <label id="mail_succeed" class="blank"></label>  
  52.           <span class="clear"></span>  
  53.           <div id="mail_error"></div>  
  54.         </div>  
  55.       </div>  
  56.       <!--item end-->  
  57.       <div class="item"> <span class="label"><span class="red">*</span>所在部门：</span>  
  58.         <div class="fl">  
  59.           <select rel="select" id="department" name="department" tabindex="8">  
  60.             <option value="-1"  >请选择</option>  
  61.             <option value="www"  >www</option>  
  62.             <option value="xxx"  >xxx</option>  
  63.             <option value="yyy"  >yyy</option>  
  64.             <option value="zzz"  >zzz</option>  
  65.             <option value="ppp"  >ppp</option>  
  66.             <option value="ooo"  >ooo</option>  
  67.           </select>  
  68.           <label id="department_succeed" class="blank"></label>  
  69.           <span class="clear"></span>  
  70.           <label id="department_error"></label>  
  71.         </div>  
  72.       </div>  
  73.       <!--item end-->  
  74.       <div class="item"> <span class="label"><span class="red">*</span>手机：</span>  
  75.         <div class="fl">  
  76.           <input type="text" id="mobile" name="mobile" class="text" value="" tabindex="10" />  
  77.           <label id="mobile_succeed" class="blank"></label>  
  78.           <span class="clear"></span>  
  79.           <label id="mobile_error"></label>  
  80.         </div>  
  81.       </div>  
  82.       <!--item end-->  
  83.       <div class="item"> <span class="label"><span class="red">*</span>购买类型/用途：</span>  
  84.         <div class="fl">  
  85.           <input id="purpose1" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="aaa" />  
  86.           <label class="pad" for="purpose1">aaa</label>  
  87.           <input id="purpose2" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="bbb" />  
  88.           <label class="pad" for="purpose2">bbb</label>  
  89.           <input id="purpose3" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="ccc" />  
  90.           <label class="pad" for="purpose3">ccc</label>  
  91.           <input id="purpose4" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="ddd" />  
  92.           <label class="pad" for="purpose4">ddd</label>  
  93.           <input id="purpose5" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="eee" />  
  94.           <label class="pad" for="purpose5">eee</label>  
  95.           <input id="purpose6" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="fff" />  
  96.           <label class="pad" for="purpose6">fff</label>  
  97.           <input id="purpose" type="hidden" value="" />  
  98.           <label id="purpose_succeed" class="blank"></label>  
  99.           <span class="clear"></span>  
  100.           <label id="purpose_error"></label>  
  101.         </div>  
  102.       </div>  
  103.       <!--item end-->  
  104.       <div class="item"> <span class="label"><span class="red">*</span>验证码：</span>  
  105.         <div class="fl">  
  106.           <input type="text" id="authcode" name="authcode" class="text text-1" autocomplete="off" MaxLength="4" tabindex="6" />  
  107.           <label class="img"><img id="JD_Verification1" Ver_ColorOfNoisePoint="#888888" src="../jcaptcha" onclick="this.src='../jcaptcha?now=' + new Date().getTime()"  
  108.             alt="看不清？点击换一张" style="cursor:pointer;width:100px;height:26px;" /> </label>  
  109.           <label> 看不清？点击更换</label>  
  110.           <label id="authcode_succeed" class="blank invisible"></label>  
  111.           <span class="clear"></span>  
  112.           <label id="authcode_error"></label>  
  113.         </div>  
  114.       </div>  
  115.       <!--item end-->  
  116.       <div class="item"> <span class="label"> </span>  
  117.         <div class="fl">  
  118.           <input type="checkbox" name="protocol" id="protocol" tabindex="7" />  
  119.           <label for="protocol">网站用户注册协议</label>  
  120.         </div>  
  121.       </div>  
  122.       <!--item end-->  
  123.       <div class="item"> <span class="label"> </span>  
  124.         <input type="button" class="yellow_button disabled" id="registsubmit" value="提交注册信息" tabindex="8" disabled="disabled" />  
  125.       </div>  
  126.       <!--item end-->  
  127.     </div>  
  128.   </form>  
  129. </div>  
  130. <!--formbox end-->  
  131. <script type="text/javascript" src="js/Validate.js"></script>  
  132. <script type="text/javascript" src="js/Validate.form.js"></script>  
  133. </body>  
  134. </html>  

Validate.form.js的配置源码如下，其他js可以从网上下载到，直接引入就可以了

[java]  view plain  copy
  1. $.extend(validatePrompt, {  
  2.     department:{  
  3.         onFocus:"",  
  4.         succeed:"",  
  5.         isNull:"请选择联系人所在部门",  
  6.         error:""  
  7.     },  
  8.     mobile:{  
  9.         onFocus:"非北京、上海、广州三地客户，请在手机号前加“0”",  
  10.         succeed:"",  
  11.         isNull:"请输入您的手机号码",  
  12.         error:"手机号格式错误，请重新输入"  
  13.     },  
  14.     purpose:{  
  15.         onFocus:"",  
  16.         succeed:"",  
  17.         isNull:"请选择购买类型/用途",  
  18.         error:""  
  19.     }  
  20. });  
  21.   
  22. $.extend(validateFunction, {  
  23.     department:function(option) {  
  24.         var bool = (option.value == -1);  
  25.         if (bool) {  
  26.             validateSettings.isNull.run(option, "");  
  27.         }  
  28.         else {  
  29.             validateSettings.succeed.run(option);  
  30.         }  
  31.     },  
  32.     mobile:function(option) {  
  33.         var format = validateRules.isMobile(option.value);  
  34.         if (!format) {  
  35.             validateSettings.error.run(option, option.prompts.error);  
  36.         }  
  37.         else {  
  38.             validateSettings.succeed.run(option);  
  39.         }  
  40.     },  
  41.     purpose:function(option) {  
  42.         var purpose = $("input:checkbox[@name='purposetype']");  
  43.         if (validateFunction.checkGroup(purpose)) {  
  44.             validateSettings.succeed.run(option);  
  45.         } else {  
  46.             validateSettings.error.run(option, option.prompts.isNull);  
  47.         }  
  48.     },  
  49.     companysite:function(option) {  
  50.         var length = validateRules.betweenLength(option.value, 0, 80);  
  51.         var format = validateRules.isCompanysite(option.value);  
  52.         if (!length) {  
  53.             validateSettings.error.run(option, option.prompts.error.badLength);  
  54.         } else {  
  55.             if (!format) {  
  56.                 validateSettings.error.run(option, option.prompts.error.badFormat);  
  57.             }  
  58.             else {  
  59.                 validateSettings.succeed.run(option);  
  60.             }  
  61.         }  
  62.     },  
  63.     FORM_validate:function() {  
  64.         $("#username").jdValidate(validatePrompt.username, validateFunction.username, true);  
  65.         $("#pwd").jdValidate(validatePrompt.pwd, validateFunction.pwd, true);  
  66.         $("#pwd2").jdValidate(validatePrompt.pwd2, validateFunction.pwd2, true);  
  67.         $("#department").jdValidate(validatePrompt.department, validateFunction.department, true);  
  68.         $("#mobile").jdValidate(validatePrompt.mobile,validateFunction.mobile,true);  
  69.         $("#mail").jdValidate(validatePrompt.mail, validateFunction.mail, true);  
  70.         $("#purpose").jdValidate(validatePrompt.purpose, validateFunction.purpose, true);  
  71.          $("#authcode").jdValidate(validatePrompt.authcode, validateFunction.authcode, true);  
  72.         return validateFunction.FORM_submit(["#username","#pwd","#pwd2","#mail","#mobile","#department","#purpose","#authcode"]);  
  73.     }  
  74. });  
  75.   
  76.   
  77.   
  78.   
  79. //默认下用户名框获得焦点  
  80. setTimeout(function() {  
  81.     $("#username").get(0).focus();  
  82. }, 0);  
  83. //用户名验证  
  84. $("#username").jdValidate(validatePrompt.username, validateFunction.username);  
  85. //密码验证  
  86. $("#pwd").bind("keyup",function(){  
  87.     validateFunction.pwdstrength();  
  88. }).jdValidate(validatePrompt.pwd, validateFunction.pwd);  
  89. //二次密码验证  
  90. $("#pwd2").jdValidate(validatePrompt.pwd2, validateFunction.pwd2);  
  91. //邮箱验证  
  92. $("#mail").jdValidate(validatePrompt.mail, validateFunction.mail);  
  93. //部门验证  
  94. $("#department").jdValidate(validatePrompt.department, validateFunction.department);  
  95. //手机验证  
  96. $("#mobile").jdValidate(validatePrompt.mobile, validateFunction.mobile);  
  97. //显示密码事件  
  98. $("#viewpwd").bind("click", function() {  
  99.     if ($(this).attr("checked") == true) {  
  100.         validateFunction.showPassword("text");  
  101.         $("#o-password").addClass("pwdbg");  
  102.     } else {  
  103.         validateFunction.showPassword("password");  
  104.         $("#o-password").removeClass("pwdbg");  
  105.     }  
  106. });  
  107. //购买类型/用途验证  
  108. $("input:checkbox[@name='purposetype']").bind("click", function() {  
  109.     var value1 = $("#purpose").val();  
  110.     var value2 = $(this).val();  
  111.     if ($(this).attr("checked") == true) {  
  112.         if (value1.indexOf(value2) == -1) {  
  113.             $("#purpose").val(value1 + value2);  
  114.             $("#purpose").attr("sta", 2);  
  115.             $("#purpose_error").html("");  
  116.             $("#purpose_succeed").addClass("succeed");  
  117.         }  
  118.     } else {  
  119.         if (value1.indexOf(value2) != -1) {  
  120.             value1 = value1.replace(value2, "");  
  121.             $("#purpose").val(value1);  
  122.             if ($("#purpose").val() == "") {  
  123.                 $("#purpose").attr("sta", 0);  
  124.                 $("#purpose_succeed").removeClass("succeed");  
  125.             }  
  126.         }  
  127.     }  
  128. });  
  129. //验证码验证  
  130. $("#authcode").jdValidate(validatePrompt.authcode, validateFunction.authcode);  
  131. //确认协议才能提交  
  132. $("#protocol").click(function() {  
  133.     if ($("#protocol").attr("checked") != true) {  
  134.         $("#registsubmit").attr({ "disabled": "disabled" });  
  135.         $("#registsubmit").addClass("disabled");  
  136.     }  
  137.     else {  
  138.         $("#registsubmit").removeAttr("disabled");  
  139.         $("#registsubmit").removeClass("disabled");  
  140.     }  
  141. });  
  142. //表单提交验证和服务器请求  
  143. $("#registsubmit").click(function() {  
  144.     var flag = validateFunction.FORM_validate();  
  145.     if (flag) {  
  146.         $(this).attr({"disabled":"disabled"}).attr({"value":"提交中,请稍等"});  
  147.         $.ajax({  
  148.             type: "POST",  
  149.             url: "registry.do",  
  150.             contentType: "application/x-www-form-urlencoded; charset=utf-8",  
  151.             data: $("#formpersonal").serialize(),  
  152.             success: function(result) {  
  153.                 if (true) {  
  154.                    location.href=result;  
  155.                 }  
  156.                 else{  
  157.                  alert("fail");  
  158.                 }  
  159.             }  
  160.         });  
  161.     }  
  162. });  

然后是后台的一些代码，其中都包含线程睡眠3秒中，是为了让异步检验时显示出 “检验中......”

[java]  view plain  copy
  1. @RequestMapping(value = "/jquery_registration/checkUsername.do", method = RequestMethod.POST)  
  2.     @ResponseBody  
  3.     public String checkUsername(  
  4.             @RequestParam(value = "username") String username)  
  5.             throws InterruptedException {  
  6.         Thread.sleep(3000);  
  7.         if (!username.equals("aaaa")) {  
  8.             System.out  
  9.                     .println("---------- you can registry with this username : "  
  10.                             + username);  
  11.             return "success";  
  12.         }  
  13.         System.out.println("---------- " + username + " is already exist");  
  14.         return "error";  
  15.     }  
  16.   
  17.     @RequestMapping(value = "/jquery_registration/checkEmail.do", method = RequestMethod.POST)  
  18.     @ResponseBody  
  19.     public String checkEmail(@RequestParam(value = "email") String email)  
  20.             throws InterruptedException {  
  21.         Thread.sleep(3000);  
  22.         if (!email.equals("15918750261@163.com")) {  
  23.             System.out.println("---------- you can registry with this email : "  
  24.                     + email);  
  25.             return "success";  
  26.         }  
  27.         System.out.println("---------- " + email + " id already exist");  
  28.         return "error";  
  29.     }  
  30.   
  31.     @RequestMapping(value = "/jquery_registration/checkValidation.do", method = RequestMethod.POST)  
  32.     @ResponseBody  
  33.     public String checkValidation(  
  34.             @RequestParam(value = "validation") String validateCode,  
  35.             HttpServletRequest request) throws InterruptedException {  
  36.         Thread.sleep(3000);  
  37.         boolean isCorrect = CaptchaServiceSingleton.getInstance()  
  38.                 .validateResponseForID(request.getSession().getId(),  
  39.                         validateCode);  
  40.         if (isCorrect) {  
  41.             System.out.println("---------Check success");  
  42.             return "success";  
  43.         }  
  44.         System.out.println("---------Check error");  
  45.         return "error";  
  46.     }  



CV_2013
关注
java验证插件_根据jquery.validate.js写的一个通用的form表单校验插件
weixin_36234452的博客
02-20 121
/*** 注册表单验证 插件* formId 表单id* @param formId*//*** error ajax*/jQuery.validator.addMethod("zznum", function(value, element) {return this.optional(element) || (/^[1-9]*[1-9][0-9]*$/.test(value));}, "只能输入...
jQuery Validate插件ajax方式验证输入值的实例
10-18
jQuery Validate插件是一个非常实用的JavaScript库，用于验证HTML表单输入。在这个实例中，我们将探讨如何使用jQuery Validate插件结合Ajax来实现异步验证用户输入值，特别是针对用户名或用户账号等需要与后台交互...
ajax validate form check
hyshucom
09-16 80
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;一个常用的Ajax表单验证程序 - www.webdm.cn&lt;/title&gt; &lt;style type="text/css"&gt; form {width:500px;border:1px solid #ccc
js的validate插件异步效验
a2018140的博客
10-31 223
　　js代码 $(function () { $("#regForm").validate({ onsubmit:true,// 是否在提交是验证 onkeyup: false, //失去焦点验证 onfocusout:function(element){ $(element).valid();},/...
Spring mvc 中利用validate 做表单验证
一起学android
08-19 142
利用SpringMVC 的form 标签  会很容易实现错误提示&lt;form:error path="*"&gt;可以输出 错误信息 而利用C标签 循环错误的话就有点麻烦了， 例：首先，在spring 的model中添加注解不能为空   会在 登录的时候有error 日志 然后 Controller 中获取 error 日志 jsp 页面通过 el表达式 获取错误日志集合，通过C：f...
springmvc中注册功能与validate.js验证并结合图片验证码
cy19734682的博客
10-26 1803
话不多话，直接上代码。 1、首先写一个form表单 <input type="text" class="kaptchaImage" name="kaptchaImage" style="width:150px;" placeholder="输入验证码" autocompl
Spring4 MVC中的表单处理与验证：构建完善的数据表单
## 1.1 Spring MVC表单处理的基本原理 在本小节中，我们将介绍Spring MVC中表单处理的基本原理，包括表单提交的流程、控制器的处理方法以及数据的绑定。通过深入了解Spring MVC的表单处理原理，我们可以更加灵活地...
EXT异步提交FORM表单
08-18
EXT框架（通常指的是Ext JS）作为一种成熟且功能丰富的JavaScript库，提供了强大的UI组件和便捷的数据处理方法，其中就包括了异步提交FORM表单的功能。 #### 二、EXT异步提交FORM表单的基本原理与实现 ##### 2.1 ...
使用Spring MVC进行表单处理及提交
介绍Spring MVC Spring MVC是一种基于Java的Web应用程序开发框架，它提供了一种轻量级的方式来开发Web应用程序。Spring MVC是Spring Framework的一部分，通过使用它，开发者可以更加方便地构建灵活可扩展的Web应用...
formValidate插件
01-23
jquery的一个插件formValidate，里面包含5个demo还有对demo的解释，每个demo中都有不同的方法去实现校验，具体可打开看源码，就不多解释了反正本人觉得还可以
JavaScript Validation Framework教程
02-02
例子加说明，让你轻松掌握JavaScript Validation Framework框架的使用。就这么简单。
Spring MVC中的模型数据绑定和数据验证
# 1....Spring MVC采用经典的MVC设计模式，其中模型（Model）表示应用程序的状态和行为，视图（View）负责渲染模型的状态，并最终呈现给用户，控制器（Controller）负责处理用户请求，调用模型以及选
jquery---ajax异步提交+validate表单验证
markely的专栏
04-30 6662
$("#submitButton").click(function(){ //序列化表单 var param = $("#leaveSave").serialize(); $.ajax({ url : "leaveSave.action", type : "post", dataType : "json", data: pa
validate表单验证
热门推荐
chenjing928的博客
10-04 7万+
使用validate做表单验证，实现效果如图： 当然，也可以换成中文的（如果你觉得默认的提示信息不是你想要的，你也可以自定义提示信息） validate使用步骤: 1.导入jquery.js 2.导入validate.js 3.在页面加载成功之后 对表单进行校验  $("选择器").validate() 4.在validate中编写校验规则 $("选择器").
京东的js注册验证个人收集
weixin_33750452的博客
06-17 308
var validateRegExp={ decmal:"^([+-]?)\\d*\\.\\d+$", //浮点数 decmal1: "^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$", //正浮点数 decmal2: "^-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*)$", //负浮点数 decmal3: "^-?([1-9]\\d*.\...
JavaScript Validation Framework(JSValidation)用户手册
技术学习与分享
11-27 4906
 1. JSValidation是什么？如首页所说，JSValidation是客户端表单验证框架，用在BS系统中，或者简单的网页系统中。表单验证在这些开发中很常见：新用户注册，需要校验某些字段；用户登陆，需要校验；等等。在这之前，页面开发者（JavaScript开发者）需要编写大量的JavaScript来与表单对象交互，并进行校验。常见的校验如不能为空，必须满足长度要求，必须为数字，必须为Em
Javascript知识【validation插件重写表单注册校验】
日常学习总结
08-13 593
用validation插件进行表单校验
使用JSValidation
Edward_qing_Lee的专栏
12-09 1397
在实际Web项目的开发过程中，很多HTML表单都需要使用JavaScript编写的代码验证，网络上有很多非常好的开源JavaScript验证程序可供直接使用。其中JSValidation验证框架是一个比较优秀的JavaScript客户端验证框架，作者为中国人"Michael Chen"。其中文文档支持非常全面，很适合我国的开发人员使用。 JSValidation验证框架的官方网址为http://
jQuery表单验证插件jquery.validate.js实战：三种方法解析
"jQuery表单验证插件（jquery.validate.js）是用于前端数据验证的强大工具，它可以帮助开发者轻松实现对用户输入的验证。本资源详细介绍了该插件的三种使用方式，通过具体的代码示例帮助读者理解和应用。" 在网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值