jquery validate 一个注册表单的应用
Posted 赤脚大仙~<
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery validate 一个注册表单的应用相关的知识，希望对你有一定的参考价值。
先看页面
前端表单代码 register.html
<form class="mui-input-group" id="regForm"> <div class="mui-input-row"> <label>账号</label> <input id=\'account\' name="account" type="text" class="mui-input-clear mui-input" placeholder="请输入账号" required> </div> <div class="mui-input-row"> <label>密码</label> <input id=\'password\' name="password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码" required> </div> <div class="mui-input-row"> <label>确认</label> <input id=\'password_confirm\' name="password_confirm" type="password" class="mui-input-clear mui-input" placeholder="请确认密码" required> </div> <div class="mui-input-row"> <label>邮箱</label> <input id=\'email\' name="email" type="email" class="mui-input-clear mui-input" placeholder="请输入邮箱" required> </div> <div class="mui-content-padded"> <button id="reg" type="submit" class="mui-btn mui-btn-block mui-btn-primary">注册</button> </div> <div class="mui-content-padded"> <p>注册真实可用，注册成功后的用户可用于登录，但是示例程序并未和服务端交互，用户相关数据仅存储于本地。</p> </div> </form>
所引用的js文件
<script type="text/javascript" src="/Public/vendor/jquery/jquery.min.js"></script> <script src="/Public/vendor/layer/3.0/layer.js"></script> <script type="text/javascript" src="/Public/vendor/jquery.validation/jquery.validate.min.js"></script> <script type="text/javascript" src="/Public/vendor/jquery.validation/additional-methods.js"></script> <script type="text/javascript" src="/Public/vendor/jquery.validation/localization/messages_zh.js"></script> <script src="/Public/dist/js/common/jQuery.md5.js"></script> <script type="text/javascript"> $(function(){ let validate = $("#regForm").validate({ onkeyup:false, submitHandler:function(form){ $.ajax({ url: "__CONTROLLER__/register", type: \'POST\', dataType: \'json\', data: { username: $("#account").val(), password: $.md5($("#password").val()) }, success: function (data) { if (data.status === \'success\') { layer.msg(\'注册成功请稍后....\', { icon: 1, time: 3000,//3秒后跳转 end: function () { window.location.href = data.url; } }); } else { layer.msg(data.msg, {icon: 2, time: 3000}) } } }); return false; }, rules:{ account:{ rangelength:[6,20],
//异步验证用户名是否存在 remote:{ url:"__CONTROLLER__/checkUserExist", type:"post", dataType:"json", cache:false, data:{ account:function(){ return $("#account").val(); } } } }, password:{ rangelength:[8,16], checkPassStrength:true //检验密码强度 }, password_confirm:{equalTo:\'#password\'} }, messages:{ account:{remote:\'该用户名已存在！\'}, password_confirm:{equalTo:\'请与密码保持一致\'} }, //修改错误提示的样式 showErrors: function (errorMap, errorList) { var msg = ""; $.each(errorList, function (i, v) { layer.tips(v.message , v.element, { tips: [1, \'#CCA32D\'], time: 2000 }); return false; }); }, }); }); </script>
在 additional-methods.js 这个文件里添加了密码强度的验证方法
//密码强度验证 $.validator.addMethod("checkPassStrength", function(value, element, param){ //方法中又有三个参数:value:被验证的值， element:当前验证的dom对象，param:参数(多个即是数组) //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]); return new RegExp(/(?=.*\\d)(?![.\\n])(?=.*[A-Z])(?=.*[a-z]).*$/).test(value); }, "密码至少包含字母、数字和特殊字符");
在后端验证用户名是否存在
/** * 查询该用户名是否存在 */ public function checkUserExist(){ if(IS_POST){ if(M(\'user\')->where(array(\'username\'=>I(\'account\',0)))->find()){ // $this->ajaxReturn(array(\'status\'=>\'error\',\'msg\'=>\'该账户名不存在！\')); exit("false") ; }else{ exit("true") ; } } }
以上是关于jquery validate 一个注册表单的应用的主要内容，如果未能解决你的问题，请参考以下文章
jquery中的表单验证if($.sValid())是否写错了？$.valid()这样写表单木有反应，改肿么写？