Refer from http://blog.csdn.net/yangxuan0261/article/details/10033537
很好用的表单异步验证插件,很多时候都是在注册的时候用。
看下效果图
使用方式
html页面
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>jquery实现网站注册页面验证信息</title>
- <link href="css/style.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="js/jquery.js"></script>
- </head>
- <body>
- <div id="formbox">
- <form id="formpersonal" method="post" onsubmit="return false;">
- <div class="form">
- <h3>帐户信息</h3>
- <div class="item"> <span class="label"><span class="red">*</span>用户名:</span>
- <div class="fl">
- <input type="text" id="username" name="username" class="text" tabindex="1" />
- <label id="username_succeed" class="blank"></label>
- <span class="clear"></span>
- <div id="username_error"></div>
- </div>
- </div>
- <!--item end-->
- <div id="o-password">
- <div class="item"> <span class="label"><span class="red">*</span>设置密码:</span>
- <div class="fl">
- <input type="password" id="pwd" name="password" class="text" tabindex="2"/>
- <label id="pwd_succeed" class="blank"></label>
- <input type="checkbox" class="checkbox" id="viewpwd"/>
- <label class="ftx23" for="viewpwd">显示密码字符</label>
- <span class="clear"></span>
- <label class="hide" id="pwdstrength"><span class="fl">安全程度:</span><b></b></label>
- <label id="pwd_error"></label>
- </div>
- </div>
- <!--item end-->
- <div class="item"> <span class="label"><span class="red">*</span>确认密码:</span>
- <div class="fl">
- <input type="password" id="pwd2" name="password2" class="text" tabindex="3"/>
- <label id="pwd2_succeed" class="blank"></label>
- <span class="clear"></span>
- <label id="pwd2_error"></label>
- </div>
- </div>
- <!--item end-->
- </div>
- <!--o-password end-->
- <div class="item"> <span class="label"><span class="red">*</span>邮箱:</span>
- <div class="fl">
- <input type="text" id="mail" name="mail" class="text" tabindex="4"/>
- <label id="mail_succeed" class="blank"></label>
- <span class="clear"></span>
- <div id="mail_error"></div>
- </div>
- </div>
- <!--item end-->
- <div class="item"> <span class="label"><span class="red">*</span>所在部门:</span>
- <div class="fl">
- <select rel="select" id="department" name="department" tabindex="8">
- <option value="-1" >请选择</option>
- <option value="www" >www</option>
- <option value="xxx" >xxx</option>
- <option value="yyy" >yyy</option>
- <option value="zzz" >zzz</option>
- <option value="ppp" >ppp</option>
- <option value="ooo" >ooo</option>
- </select>
- <label id="department_succeed" class="blank"></label>
- <span class="clear"></span>
- <label id="department_error"></label>
- </div>
- </div>
- <!--item end-->
- <div class="item"> <span class="label"><span class="red">*</span>手机:</span>
- <div class="fl">
- <input type="text" id="mobile" name="mobile" class="text" value="" tabindex="10" />
- <label id="mobile_succeed" class="blank"></label>
- <span class="clear"></span>
- <label id="mobile_error"></label>
- </div>
- </div>
- <!--item end-->
- <div class="item"> <span class="label"><span class="red">*</span>购买类型/用途:</span>
- <div class="fl">
- <input id="purpose1" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="aaa" />
- <label class="pad" for="purpose1">aaa</label>
- <input id="purpose2" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="bbb" />
- <label class="pad" for="purpose2">bbb</label>
- <input id="purpose3" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="ccc" />
- <label class="pad" for="purpose3">ccc</label>
- <input id="purpose4" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="ddd" />
- <label class="pad" for="purpose4">ddd</label>
- <input id="purpose5" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="eee" />
- <label class="pad" for="purpose5">eee</label>
- <input id="purpose6" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="fff" />
- <label class="pad" for="purpose6">fff</label>
- <input id="purpose" type="hidden" value="" />
- <label id="purpose_succeed" class="blank"></label>
- <span class="clear"></span>
- <label id="purpose_error"></label>
- </div>
- </div>
- <!--item end-->
- <div class="item"> <span class="label"><span class="red">*</span>验证码:</span>
- <div class="fl">
- <input type="text" id="authcode" name="authcode" class="text text-1" autocomplete="off" MaxLength="4" tabindex="6" />
- <label class="img"><img id="JD_Verification1" Ver_ColorOfNoisePoint="#888888" src="../jcaptcha" onclick="this.src='../jcaptcha?now=' + new Date().getTime()"
- alt="看不清?点击换一张" style="cursor:pointer;width:100px;height:26px;" /> </label>
- <label> 看不清?点击更换</label>
- <label id="authcode_succeed" class="blank invisible"></label>
- <span class="clear"></span>
- <label id="authcode_error"></label>
- </div>
- </div>
- <!--item end-->
- <div class="item"> <span class="label"> </span>
- <div class="fl">
- <input type="checkbox" name="protocol" id="protocol" tabindex="7" />
- <label for="protocol">网站用户注册协议</label>
- </div>
- </div>
- <!--item end-->
- <div class="item"> <span class="label"> </span>
- <input type="button" class="yellow_button disabled" id="registsubmit" value="提交注册信息" tabindex="8" disabled="disabled" />
- </div>
- <!--item end-->
- </div>
- </form>
- </div>
- <!--formbox end-->
- <script type="text/javascript" src="js/Validate.js"></script>
- <script type="text/javascript" src="js/Validate.form.js"></script>
- </body>
- </html>
Validate.form.js的配置源码如下,其他js可以从网上下载到,直接引入就可以了
- $.extend(validatePrompt, {
- department:{
- onFocus:"",
- succeed:"",
- isNull:"请选择联系人所在部门",
- error:""
- },
- mobile:{
- onFocus:"非北京、上海、广州三地客户,请在手机号前加“0”",
- succeed:"",
- isNull:"请输入您的手机号码",
- error:"手机号格式错误,请重新输入"
- },
- purpose:{
- onFocus:"",
- succeed:"",
- isNull:"请选择购买类型/用途",
- error:""
- }
- });
- $.extend(validateFunction, {
- department:function(option) {
- var bool = (option.value == -1);
- if (bool) {
- validateSettings.isNull.run(option, "");
- }
- else {
- validateSettings.succeed.run(option);
- }
- },
- mobile:function(option) {
- var format = validateRules.isMobile(option.value);
- if (!format) {
- validateSettings.error.run(option, option.prompts.error);
- }
- else {
- validateSettings.succeed.run(option);
- }
- },
- purpose:function(option) {
- var purpose = $("input:checkbox[@name='purposetype']");
- if (validateFunction.checkGroup(purpose)) {
- validateSettings.succeed.run(option);
- } else {
- validateSettings.error.run(option, option.prompts.isNull);
- }
- },
- companysite:function(option) {
- var length = validateRules.betweenLength(option.value, 0, 80);
- var format = validateRules.isCompanysite(option.value);
- if (!length) {
- validateSettings.error.run(option, option.prompts.error.badLength);
- } else {
- if (!format) {
- validateSettings.error.run(option, option.prompts.error.badFormat);
- }
- else {
- validateSettings.succeed.run(option);
- }
- }
- },
- FORM_validate:function() {
- $("#username").jdValidate(validatePrompt.username, validateFunction.username, true);
- $("#pwd").jdValidate(validatePrompt.pwd, validateFunction.pwd, true);
- $("#pwd2").jdValidate(validatePrompt.pwd2, validateFunction.pwd2, true);
- $("#department").jdValidate(validatePrompt.department, validateFunction.department, true);
- $("#mobile").jdValidate(validatePrompt.mobile,validateFunction.mobile,true);
- $("#mail").jdValidate(validatePrompt.mail, validateFunction.mail, true);
- $("#purpose").jdValidate(validatePrompt.purpose, validateFunction.purpose, true);
- $("#authcode").jdValidate(validatePrompt.authcode, validateFunction.authcode, true);
- return validateFunction.FORM_submit(["#username","#pwd","#pwd2","#mail","#mobile","#department","#purpose","#authcode"]);
- }
- });
- //默认下用户名框获得焦点
- setTimeout(function() {
- $("#username").get(0).focus();
- }, 0);
- //用户名验证
- $("#username").jdValidate(validatePrompt.username, validateFunction.username);
- //密码验证
- $("#pwd").bind("keyup",function(){
- validateFunction.pwdstrength();
- }).jdValidate(validatePrompt.pwd, validateFunction.pwd);
- //二次密码验证
- $("#pwd2").jdValidate(validatePrompt.pwd2, validateFunction.pwd2);
- //邮箱验证
- $("#mail").jdValidate(validatePrompt.mail, validateFunction.mail);
- //部门验证
- $("#department").jdValidate(validatePrompt.department, validateFunction.department);
- //手机验证
- $("#mobile").jdValidate(validatePrompt.mobile, validateFunction.mobile);
- //显示密码事件
- $("#viewpwd").bind("click", function() {
- if ($(this).attr("checked") == true) {
- validateFunction.showPassword("text");
- $("#o-password").addClass("pwdbg");
- } else {
- validateFunction.showPassword("password");
- $("#o-password").removeClass("pwdbg");
- }
- });
- //购买类型/用途验证
- $("input:checkbox[@name='purposetype']").bind("click", function() {
- var value1 = $("#purpose").val();
- var value2 = $(this).val();
- if ($(this).attr("checked") == true) {
- if (value1.indexOf(value2) == -1) {
- $("#purpose").val(value1 + value2);
- $("#purpose").attr("sta", 2);
- $("#purpose_error").html("");
- $("#purpose_succeed").addClass("succeed");
- }
- } else {
- if (value1.indexOf(value2) != -1) {
- value1 = value1.replace(value2, "");
- $("#purpose").val(value1);
- if ($("#purpose").val() == "") {
- $("#purpose").attr("sta", 0);
- $("#purpose_succeed").removeClass("succeed");
- }
- }
- }
- });
- //验证码验证
- $("#authcode").jdValidate(validatePrompt.authcode, validateFunction.authcode);
- //确认协议才能提交
- $("#protocol").click(function() {
- if ($("#protocol").attr("checked") != true) {
- $("#registsubmit").attr({ "disabled": "disabled" });
- $("#registsubmit").addClass("disabled");
- }
- else {
- $("#registsubmit").removeAttr("disabled");
- $("#registsubmit").removeClass("disabled");
- }
- });
- //表单提交验证和服务器请求
- $("#registsubmit").click(function() {
- var flag = validateFunction.FORM_validate();
- if (flag) {
- $(this).attr({"disabled":"disabled"}).attr({"value":"提交中,请稍等"});
- $.ajax({
- type: "POST",
- url: "registry.do",
- contentType: "application/x-www-form-urlencoded; charset=utf-8",
- data: $("#formpersonal").serialize(),
- success: function(result) {
- if (true) {
- location.href=result;
- }
- else{
- alert("fail");
- }
- }
- });
- }
- });
然后是后台的一些代码,其中都包含线程睡眠3秒中,是为了让异步检验时显示出 “检验中......”
- @RequestMapping(value = "/jquery_registration/checkUsername.do", method = RequestMethod.POST)
- @ResponseBody
- public String checkUsername(
- @RequestParam(value = "username") String username)
- throws InterruptedException {
- Thread.sleep(3000);
- if (!username.equals("aaaa")) {
- System.out
- .println("---------- you can registry with this username : "
- + username);
- return "success";
- }
- System.out.println("---------- " + username + " is already exist");
- return "error";
- }
- @RequestMapping(value = "/jquery_registration/checkEmail.do", method = RequestMethod.POST)
- @ResponseBody
- public String checkEmail(@RequestParam(value = "email") String email)
- throws InterruptedException {
- Thread.sleep(3000);
- if (!email.equals("15918750261@163.com")) {
- System.out.println("---------- you can registry with this email : "
- + email);
- return "success";
- }
- System.out.println("---------- " + email + " id already exist");
- return "error";
- }
- @RequestMapping(value = "/jquery_registration/checkValidation.do", method = RequestMethod.POST)
- @ResponseBody
- public String checkValidation(
- @RequestParam(value = "validation") String validateCode,
- HttpServletRequest request) throws InterruptedException {
- Thread.sleep(3000);
- boolean isCorrect = CaptchaServiceSingleton.getInstance()
- .validateResponseForID(request.getSession().getId(),
- validateCode);
- if (isCorrect) {
- System.out.println("---------Check success");
- return "success";
- }
- System.out.println("---------Check error");
- return "error";
- }