利用ajax，js以及正则表达式来验证表单递交

Posted 2020-11-14 小猪_佩奇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用ajax，js以及正则表达式来验证表单递交相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>注册</title>
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <link rel="stylesheet" href="css/register.css">
      <!--导入jquery-->
      <script src="js/jquery-3.3.1.js"></script>
      <script>
         //校验用户名
         function checkUserName() {
            //1、获取控件username的值
            var username = $("#username").val();
            //2、定义正则表达式
             var reg_username=/^w{8,20}$/;
            //3、判断
            var flag = reg_username.test(username);
            if(flag){
                $("#username").css("border","");
            }else{
                $("#username").css("border","solid 1px red");
            }
            return flag;
            }

            //校验密码
            function checkPassword() {
            //1、获取password控件的输入值
            var password = $("#password").val();
            //2、定义正则表达式
            var reg_password = /^w{8,20}$/;
            //3、判断
            var flag = reg_password.test(password);
            if(flag){
                $("#password").css("border","solid 1px green");
            }else{
                $("#password").css("border","solid 2px red");
            }
            return flag;
            }

            //校验邮箱
         function checkEmail() {
            //1、获取email中的值
            var email = $("#email").val();
            //2、定义正则表达式
            var reg_email = /^w+@w+.w+$/;
            //3、判断
            var flag = reg_email.test(email);
            if(flag){
                $("#email").css("border","solid 1px green");
            }else{
                $("#email").css("border","solid 2px red");
            }
            return flag;
            }

            //校验姓名
         function checkname() {
            //1、获取name的值
            var name = $("#name").val();
            //2、定义正则表达式
            var reg_name = /^w{3,20}$/;
            var flag = reg_name.test(name);
            //3、判断
            if(flag){
                      $("#name_msg").css("border","solid 1px green");
            }else{
                      $("#name_msg").css("border","solid 1px red");
            }
            return flag;
            }

            function checktelephone() {
            //1、获取telephone的值
            var telephone = $("#telephone").val();
            //2、定义正则表达式
            var reg_telphone =/^1[34589][0-9]{9}$/;
            //3、判断
            var flag = reg_telphone.test(telephone);
            if(flag){
                $("#telephone").css("border","solid 1px green");
            }else{
                $("#telephone").css("border","solid 1px red");
            }
            return flag;
            }

            $(function () {
                //当表单提交的时候，调用所有的验证方法
            $("#registerForm").submit(function () {
                //发送数据到服务器
                if(checkUserName() && checkPassword() && checkEmail() && checkname() && checktelephone()){
                    $.post("registUserServlet",$(this).serialize(),function(data){
                  });
               }
               return false;
                });


                //失去焦点时，调用方法
            $("#username").blur(checkUserName);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);
            $("#name").blur(checkname);
            $("#telephone").blur(checktelephone);
            });
      </script>
    </head>
   <body>
   <!--引入头部-->
   <div id="header"></div>
        <!-- 头部 end -->
       <div class="rg_layout">
          <div class="rg_form clearfix">
             <div class="rg_form_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
             </div>
             <div class="rg_form_center">

               <!--注册表单-->
                <form id="registerForm" action="user">
                  <!--提交处理请求的标识符-->
                  <input type="hidden" name="action" value="register">
                   <table style="margin-top: 25px;">
                      <tr>
                         <td class="td_left">
                            <label for="username">用户名</label>
                         </td>
                         <td class="td_right">
                            <input type="text" id="username" name="username" placeholder="请输入账号">
                         </td>
                      </tr>
                      <tr>
                         <td class="td_left">
                            <label for="password">密码</label>
                         </td>
                         <td class="td_right">
                            <input type="text" id="password" name="password" placeholder="请输入密码">
                         </td>
                      </tr>
                      <tr>
                         <td class="td_left">
                            <label for="email">Email</label>
                         </td>
                         <td class="td_right">
                            <input type="text" id="email" name="email" placeholder="请输入Email">
                         </td>
                      </tr>
                      <tr>
                         <td class="td_left">
                           <label for="name">姓名</label>
                         </td>
                         <td class="td_right">
                            <input type="text" id="name" name="name" placeholder="请输入真实姓名">
                         </td>
                      </tr>
                      <tr>
                         <td class="td_left">
                            <label for="telephone">手机号</label>
                         </td>
                         <td class="td_right">
                            <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
                         </td>
                      </tr>
                      <tr>
                         <td class="td_left">
                            <label for="sex">性别</label>
                         </td>
                         <td class="td_right gender">
                            <input type="radio" id="sex" name="sex" value="男" checked> 男                            
<input type="radio" name="sex" value="女"> 女                         
</td>
                      </tr>
                      <tr>
                         <td class="td_left">
                            <label for="birthday">出生日期</label>
                         </td>
                         <td class="td_right">
                            <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
                         </td>
                      </tr>
                      <tr>
                         <td class="td_left">
                            <label for="check">验证码</label>
                         </td>
                         <td class="td_right check">
                            <input type="text" id="check" name="check" class="check">
                            <img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)" >
                           <script type="text/javascript">
//图片点击事件
function changeCheckCode(img) {                                        img.
src="checkCode?"+new Date().getTime();
                                    }                        
</script>
                         </td>
                      </tr>
                      <tr>
                         <td class="td_left">
                         </td>
                         <td class="td_right check">
                            <input type="submit" class="submit" value="注册">
                           <span id="msg" style="color: red;"></span>
                         </td>
                      </tr>
                   </table>
                </form>
             </div>
             <div class="rg_form_right">
                <p>
                   已有账号？                   
<a href="#">立即登录</a>
                </p>
             </div>
          </div>
       </div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>

    </body>
</html>
以上是关于利用ajax，js以及正则表达式来验证表单递交的主要内容，如果未能解决你的问题，请参考以下文章
Ajax和PHP正则表达式验证表单及验证码
前端表单验证常用的15个JS正则表达式