jQuery表单验证提交：前台验证二（图文+视频）

互联网 18-10-23

本篇文章主要给大家详细介绍jQuery实现表单验证提交的具体方法。

在上一篇文章【jQuery表单验证提交：前台验证一】中，已经给大家简单列举了jQuery实现表单验证提交的具体方法代码。那么本节内容就详细的为大家介绍，jQuery实现表单验证提交的具体方法。

主要代码示例如下：

<!DOCTYPE> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <title>jQuery用户注册表单验证代码</title>     <link href="css/jq22.css" rel="stylesheet" type="text/css"/>     <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>     <script language='javascript' src="js/jq22.js"></script> </head> <body> <div class='body_main'>      <div class='index_box' style='margin-top:20px;'>         <div style="position:fixed;color:red;margin:70px 0 0 450px;font-size:16px;Z-index:100;display:block;"              id="hint"></div>         <div class='box_title'>             <div class='text_content'>                 <h1>jQuery用户注册表单验证代码</h1>             </div>         </div>         <div class='box_main'>             <div id="register" class="register">                 <form id="form" action="check1.php" method="post" onSubmit="return check();">                     <div id="form_submit" class="form_submit">                         <div class="fieldset">                             <div class="field-group">                                 <label class="required title">手机号码</label>                                 <span class="control-group" id="mobile_input">                 <div class="input_add_long_background">                   <input class="register_input" type="text" id="mobile" name="mobile" maxLength="11" value=""                          onblur="__changeUserName('mobile');">                 </div>                 </span>                                 <label class="tips">仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密</label>                             </div>                             <div class="field-group">                                 <label class="required title">邮箱</label>                                 <span class="control-group" id="email_input">                 <div class="input_add_long_background">                   <input class="register_input" type="text" id="email" name="email" maxLength="50" value=""                          onblur="__changeUserName('email');">                 </div>                 </span>                                 <label class="tips">请输入您常用的邮箱</label>                             </div>                             <div class="field-group">                                 <label class="required title">设置密码</label>                                 <span class="control-group" id="password1_input">                 <div class="input_add_long_background">                   <input class="register_input" type="password" id="password1" name="password1" maxLength="20" value=""                          onblur="checkPwd1(this.value);"/>                 </div>                  </span>                                 <label class="tips">请使用6~20个英文字母（区分大小写）、符号或数字</label>                             </div>                             <div class="field-group">                                 <label class="required title">确认密码</label>                                 <span class="control-group" id="password2_input">                 <div class="input_add_long_background">                   <input class="register_input" type="password" id="password2" name="password2" maxLength="20" value=""                          onblur="checkPwd2(this.value);"/>                 </div>                  </span>                                 <label class="tips">请输入确认密码，要和上面的密码一致</label>                             </div>                         </div>                     </div>                     <div id="div_submit" class="div_submit">                         <div class='div_submit_button'>                             <input id="submit" type="submit" value="注册" class='button_button disabled'>                         </div>                     </div>                 </form>             </div>             <script type="text/javascript">                 function __changeUserName(of) {                     var username = $('#' + of).val();                     if (of == 'email') {                         if (username.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {                             showTooltips('email_input', '请输入正确的Email地址');                             return;                         }                     }                     else {                         if (username == '' || !isMobilePhone(username)) {                             showTooltips('mobile_input', '请输入正确的手机号码');                             return;                         }                     }                 }                  function checkPwd1(pwd1) {                     if (pwd1.search(/^.{6,20}$/) == -1) {                         showTooltips('password1_input', '密码为空或位数太少');                     } else {                         hideTooltips('password1_input');                     }                 }                  function checkPwd2(pwd2) {                     var pas1 = $('#password1').val();                     if (pwd2.search(/^.{6,20}$/) == -1) {                         showTooltips('password2_input', '密码为空或位数太少');                     }                     if (pwd2 != pas1) {                         showTooltips('password2_input', '两次密码不一致');                     }                 }                  function check() {                     hideAllTooltips();                     var ckh_result = true;                     // if ($('#email').val() == '' || !isEmail($('#email').val())) {                     //     showTooltips('email_input', '请输入正确的Email地址');                     //     ckh_result = false;                     // }                     if ($('#password1').val() == '') {                         showTooltips('password1_input', '密码不能为空');                         ckh_result = false;                     }                     if ($('#password2').val() == '') {                         showTooltips('password2_input', '确认密码不能为空');                         ckh_result = false;                     }                     if ($('#password2').val() != $('#password1').val()) {                         showTooltips('password2_input', '两次密码不一致');                         ckh_result = false;                     }                     if ($('#mobile').val() == '' || !isMobilePhone($('#mobile').val())) {                         showTooltips('mobile_input', '手机号码不正确');                         ckh_result = false;                     }                      return ckh_result;                 }                  function isMobilePhone(value) {                     if (value.search(/^(\+\d{2,3})?\d{11}$/) == -1) {                         return false;                     }                     else                         return true;                 }                  function isEmail(value) {                     if (value.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {                         return false;                     }                     else                         return true;                 }             </script>         </div>         <div class='box_bottom'></div>     </div> </div>  </body> </html>

上述代码中，我们简单的写了一个form表单，将前台数据提交到check1.php，提交方式为post，并且给form表单一个点击事件。

当我们点击提交的时候，就会进行一系列信息判断。而当我们没有点击注册也就是没有触发点击事件的话，也会有判断。

当然有这些判断也是不够的，所以我们需要写一个点击注册时会发生的验证，如上代码中的check方法，其中我们将每个字段都进行了判断（后台需要的字段都需要进行验证）。

除了上述中点击注册的验证方法外，我们也可以给点击注册的按钮绑定一个事件来判断验证。这里就不一一赘述了。

其中涉及到的js和css代码，在上一篇文章【jQuery表单验证提交：前台验证一】中都有，需要的朋友可以前去参考。

本篇文章就是关于jQuery实现表单验证提交的方法介绍，希望对需要的朋友有所帮助！

想要了解更多前端相关知识，可以关注PHP中文网jQuery视频教程、JavaScript视频教程、Bootstrap教程等等相关视频教程，欢迎大家参考学习！

以上就是jQuery表单验证提交：前台验证二（图文+视频）的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： jQuery表单验证提交