jQuery中表单校验

一、案例解析

实现如下功能，进行校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery表单校验</title>
    <script src="js/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
         function checkUsername() {
             //获取输入的用户名
             var uname = $("#user").val()
             //对用户名进行校验
             if(uname == ""){//判断输入的内容是否为空，如果为空则在输入框后面写入内容
                 $("#usertip").html("<font color='#a52a2a'>用户名不能为空</font>")
                 return false
             }
             if (uname.length<6){ //判断长度是否大于6位
                 $("#usertip").html("<font color='#a52a2a'>用户名长度要大于6位</font>")
                 return false
             }

             //判断是否为数字。用户名不能包含数字
             for(var i=0;i<uname.length;i++){
                 var str_name = uname.charAt(i)
                 if(str_name<"9" && str_name>="0"){
                     $("#usertip").html("<font color='#a52a2a'>用户名不用使用数字</font>")
                     return false
                 }
             }
             //如果符合要求则执行写入用户名校验通过
             $("#usertip").html("<font color='green'>用户名校验通过</font>")
             return true
         }

         function checkPassword(){
             //获取输入的用户名
             var pd = $("#pwd").val()

             if(pd == ""){//非空校验
                 $("#pwdtip").html("<font color='#a52a2a'>密码不能为空</font>")
                 return false
             }

             if(pd.length<6){//密码长度校验
                 $("#pwdtip").html("<font color='#a52a2a'>密码长度需要大于6位</font>")
                 return false
             }

             $("#pwdtip").html("<font color='green'>密码校验通过</font>")
             return true
         }

         function checkRepwd() {
             //分别获取密码和确认密码
             var passwd1 = $("pwd").val()
             var passwd2 = $("repwd").val()

             if(passwd2<6 || passwd1 != passwd2){
                 $("#repwdtip").html("<font color='#a52a2a'>确认密码不符合要求</font>")
                 return false
             }

             $("#repwdtip").html("<font color='green'>确认密码校验通过</font>")
             return true
         }

         function checkEmail() {
             //取出输入的密码框
             var email_info = $("#email").val()

             //查找出@ .的下标索引
             var idx01 = email_info.indexOf("@")
             var idx02 = email_info.indexOf(".")

             if(idx01<1 || idx02<1 || idx01>idx02){
                 $("#emailtip").html("<font color='#a52a2a'>密码格式不正确</font>")
                 return false
             }

             $("#emailtip").html("<font color='green'>密码校验通过</font>")
             return true

         }

        function checkForm() {
            return checkUsername()&&checkPassword()&&checkRepwd()&&checkEmail()
        }


    </script>
</head>
<body>
    <table id="center" border="0" cellspacing="0" cellpadding="0">
<!--        onsubmit当表单提交时执行 JavaScript:-->
        <form action="http://www.baidu.com" method="get" onsubmit="return checkForm()">
            <tr>
                <td>您的姓名：</td>
                <td>
                    <!--onblur属性是当用户离开输入字段时对其进行验证-->
                    <input id="user" type="text" name="username" onblur="checkUsername()"/>
                    <div id="usertip" style="display: inline;"></div>
                </td>
            </tr>
            <tr>
                <td>输入密码：</td>
                <td>
<!-- onblur属性是当用户离开输入字段时对其进行验证                   -->
                    <input id="pwd" name="pwd" type="password" onblur="checkPassword()"/>
                    <div id="pwdtip" style="display: inline;"></div>
                </td>
            </tr>
            <tr>
                <td>再输入一遍密码：</td>
                <td>
                    <input id="repwd" type="password" onblur="checkRepwd()"/>
                    <div id="repwdtip" style="display: inline;"></div>
                </td>
            </tr>
            <tr>
                <td>您的Email：</td>
                <td>
                    <input id="email" type="text" onblur="checkEmail()"/>
                    <span id="emailtip"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="注册" class="rb1" />
                </td>
            </tr>
        </form>
    </table>

</body>
</html>

二、正则表达式

什么是正则表达式

Regular Expression，在代码中常简写为regex,正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或多个字符串。

为什么使用正则表达式

  • 正则表达式可以是文本的校验的代码更加简洁
  • 正则表达式可以实现更加严谨细致的校验

正则表达式举例

  • 匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
  • 匹配腾讯QQ号：[1-9][0-9]{4,}
  • 匹配中国邮政编码：\d{6}
  • 匹配身份证：\d{15}|\d{18}
  • 匹配由数字和26个英文字母组成的字符串 ^[A-Za-z0-9]+$　
  • 匹配Email地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
  • 匹配中文字符的正则表达式： [\u4e00-\u9fa5] [a-zA-Z]

JavaScript中如何创建正则表达式

正则表达式在JS中创建的语法为:

var reg=/china/;
//或者
var reg=new RegExp("china");

正则表达式的通配符号

 

三、利用正则表达式进行表单校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery表单校验</title>
    <script src="js/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        function checkUsername() {
            var reg1 = /^\D{6,}$/

            //获取输入的用户名
            var uname = $("#user").val()
            //对用户名进行校验
            if(!reg1.test(uname)){//判断输入的格式是否正确，不符合格式则写入
                $("#usertip").html("<font color='#a52a2a'>用户名格式不符合要求</font>")
                return false
            }
            //如果符合要求则执行写入用户名校验通过
            $("#usertip").html("<font color='green'>用户名校验通过</font>")
            return true
        }

        function checkPassword(){
            var reg2 = /^\w{6,}$/
            //获取输入的用户名
            var pd = $("#pwd").val()

            if(!reg2.test(pd)){//密码长度校验
                $("#pwdtip").html("<font color='#a52a2a'>密码格式校验错误</font>")
                return false
            }
            $("#pwdtip").html("<font color='green'>密码校验通过</font>")
            return true
        }

        function checkRepwd() {
            //分别获取密码和确认密码
            var passwd1 = $("pwd").val()
            var passwd2 = $("repwd").val()

            if(passwd2<6 || passwd1 != passwd2){
                $("#repwdtip").html("<font color='#a52a2a'>确认密码不符合要求</font>")
                return false
            }

            $("#repwdtip").html("<font color='green'>确认密码校验通过</font>")
            return true
        }

        function checkEmail() {
            var reg_passwod = /^\w{6,}@\w{2,}\.\w{2,}$/
            //取出输入的密码框
            var email_info = $("#email").val()


            if(!reg_passwod.test(email_info)){
                $("#emailtip").html("<font color='#a52a2a'>密码格式不正确</font>")
                return false
            }

            $("#emailtip").html("<font color='green'>密码校验通过</font>")
            return true

        }

        function checkForm() {
            return checkUsername()&&checkPassword()&&checkRepwd()&&checkEmail()
        }


    </script>
</head>
<body>
<table id="center" border="0" cellspacing="0" cellpadding="0">
    <!--        onsubmit当表单提交时执行 JavaScript:-->
    <form action="http://www.baidu.com" method="get" onsubmit="return checkForm()">
        <tr>
            <td>您的姓名：</td>
            <td>
                <!--onblur属性是当用户离开输入字段时对其进行验证-->
                <input id="user" type="text" name="username" onblur="checkUsername()"/>
                <div id="usertip" style="display: inline;"></div>
            </td>
        </tr>
        <tr>
            <td>输入密码：</td>
            <td>
                <!-- onblur属性是当用户离开输入字段时对其进行验证                   -->
                <input id="pwd" name="pwd" type="password" onblur="checkPassword()"/>
                <div id="pwdtip" style="display: inline;"></div>
            </td>
        </tr>
        <tr>
            <td>再输入一遍密码：</td>
            <td>
                <input id="repwd" type="password" onblur="checkRepwd()"/>
                <div id="repwdtip" style="display: inline;"></div>
            </td>
        </tr>
        <tr>
            <td>您的Email：</td>
            <td>
                <input id="email" type="text" onblur="checkEmail()"/>
                <span id="emailtip"></span>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="注册" class="rb1" />
            </td>
        </tr>
    </form>
</table>
</body>
</html>
posted @ 2021-12-15 16:31  酒剑仙*  阅读(80)  评论(0)    收藏  举报