表单测试以及校验

java游学

已于 2022-07-11 13:36:29 修改

阅读量614

点赞数

文章标签： javascript oracle java

于 2022-07-10 13:13:26 首次发布

本文链接：https://blog.csdn.net/qq_59746711/article/details/125702987

版权

本文详细介绍了如何使用JavaScript实现前端表单的用户名、密码和手机号的验证，包括onblur事件处理、正则表达式校验以及整体表单的提交验证。通过示例代码展示了如何设置提示信息和隐藏错误信息，以及如何利用正则表达式增强验证规则的灵活性和准确性。

摘要由CSDN通过智能技术生成

表单验证

验证用户名的规范

1.应该定义一个焦点校验（onblur）：如果不符合规则，则给出提示 ，通过css的样式（style：“display：'none'”或者style：“display：''”）
例如：

<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
2.创建function方法方法名为onblur中定义的变量名
例如：

   <input name="username" type="text" id="username" onblur="checkUsername()">

3.获取input文本框中的内容，并返回他的一个value属性

注意：当用户多输入空格式，使用trim去除空格，

    document.getElementById("获取定义的id属性的值").value.trim();

例如：`id="username"`
4.接着需要判断用户名的规范

   let flag = username.length >=6  && username.length <=12;

5.根据flag给出提示，
当符合规则时，不给出提示信息，代码如下：

document.getElementById("username_err").style.display = 'none';

不符合规则，就给出提示信息

document.getElementById("username_err").style.display = '';

用户名判断综合代码：

  function checkUsername(){
       //1. 获取用户名的值： 获取input输入框元素对象，获取value属性
       let username = document.getElementById("username").value.trim();
       //2. 判断用户名 是否符合规则。 长度 [6,12]
       let flag = username.length >=6  && username.length <=12;
        //3. 根据flag 给出提示
        if(flag) {
            //符合规则,隐藏提示信息 
             document.getElementById("username_err").style.display = 'none';
        }else{
            //如果数据不符合规则，需要给出提示信息：style="display: ''"
                   document.getElementById("username_err").style.display = '';
        }
        return flag;
    }

验证用户密码的规范

此过程同用户名一样

  function checkPassword(){
       //1. 获取密码的值： 获取input输入框元素对象，获取value属性
       let password=document.getElementById("password").value.trim();
       //2. 判断密码 是否符合规则。 长度 [6,12]
       let flag = password.length >=6  && password.length <=12;

        //3. 根据flag 给出提示
        if(flag) {
            //符合规则,隐藏提示信息
            document.getElementById("password_err").style.display = 'none';

        }else{
            //如果数据不符合规则，需要给出提示信息：style="display: ''"
            document.getElementById("password_err").style.display = '';
        }
        return flag;
    }

如果添加其他的规范，比如手机号等等。都可直接复制修改其中的属性值。比如：username、password以及username_err,password_err。
最后进行全表的校验：
在from中添加 onsubmit，接着在最后创建一个function方法，方法名可以此处写了checkForm。
例如：function checkForm(){}
在其中需要调用前面的每一个方法，并在最后做出返回值写在onsubmit中。

return  checkUsername() &&  checkPassword()  &&   checkTel();

同时在每个上述每个方法中将flag进行一个return。举例如下：

function checkPassword(){
       //1. 获取密码的值： 获取input输入框元素对象，获取value属性
       let password=document.getElementById("password").value.trim();
       //2. 判断密码 是否符合规则。 长度 [6,12]
       let flag = password.length >=6  && password.length <=12;

        //3. 根据flag 给出提示
        if(flag) {
            //符合规则,隐藏提示信息
            document.getElementById("password_err").style.display = 'none';

        }else{
            //如果数据不符合规则，需要给出提示信息：style="display: ''"
            document.getElementById("password_err").style.display = '';
        }
        return flag;
    }

接着在onsubmit中写入：

 <form id="reg-form" action="#" method="get"  onsubmit="return checkForm()">

最后使用正则表达式进行优化
将let flag = password.length >=6 && password.length <=12;
修改成：

1.定义正则表达式： let reg=/^\w{6,12}$/;
2.使用正则的一个test的方法，并返回一个flag：let flag = reg.test(username);
3.密码以及其他的修改可参考上述。注意^表示开始   $表示结束
\d表示单个数字  [10]表示最多10位，{m,}表示最少m个，{m,n}表示最少m,最多n，，[0~9a~zA~Z_]使用\w代替

全部代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get"  onsubmit="return checkForm()">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username" onblur="checkUsername()">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password" onblur="checkPassword()">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel()">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>


<script>

    /*
        1. 进行onblur 事件校验
            * 如果数据不符合规则，需要给出提示信息：style="display: ''"

    */
    //1. 验证用户名是否符合规则:单词字符组成，6~12
    function checkUsername(){
       //1. 获取用户名的值： 获取input输入框元素对象，获取value属性
       let username = document.getElementById("username").value.trim();
       //2. 判断用户名 是否符合规则。 长度 [6,12]，单词字符(a-zA-Z0-9_)组成
    //    let flag = username.length >=6  && username.length <=12;
        
        // 定义正则:单词字符组成，6~12
        let reg = /^\w{6,12}$/;
        // 判断

       let flag = reg.test(username);

        //3. 根据flag 给出提示
        if(flag) {
            //符合规则,隐藏提示信息
            document.getElementById("username_err").style.display = 'none';

        }else{
            //如果数据不符合规则，需要给出提示信息：style="display: ''"
            document.getElementById("username_err").style.display = '';
        }

        return flag;
    }

    //2. 验证密码是否符合规则:单词字符组成，6~12

    function checkPassword(){
       //1. 获取密码的值： 获取input输入框元素对象，获取value属性
       let password = document.getElementById("password").value.trim();
       //2. 判断密码 是否符合规则。 长度 [6,12]
       // let flag = password.length >=6  && password.length <=12;

         // 定义正则:单词字符组成，6~12
         let reg = /^\w{6,12}$/;
        // 判断

       let flag = reg.test(password);


        //3. 根据flag 给出提示
        if(flag) {
            //符合规则,隐藏提示信息
            document.getElementById("password_err").style.display = 'none';

        }else{
            //如果数据不符合规则，需要给出提示信息：style="display: ''"
            document.getElementById("password_err").style.display = '';
        }

        return flag;
    }


    //3. 验证手机号是否符合规则：全是数字，1开头，11位
    function checkTel(){
       //1. 获取手机号的值： 获取input输入框元素对象，获取value属性
       let tel = document.getElementById("tel").value.trim();
       //2. 判断手机号 是否符合规则。 长度 11
       // let flag = tel.length ==11;

       // 定义正则：全是数字，1开头，11位
       let reg = /^[1]\d{10}$/;
    
       // 判断
       let flag = reg.test(tel);
        //3. 根据flag 给出提示
        if(flag) {
            //符合规则,隐藏提示信息
            document.getElementById("tel_err").style.display = 'none';

        }else{
            //如果数据不符合规则，需要给出提示信息：style="display: ''"
            document.getElementById("tel_err").style.display = '';
        }

        return flag;
    }



    //4. 表单整体校验

    function checkForm(){

        //判断用户名、密码、手机号输入框是否合法,如果都合法，则返回true，如果有一个不符合法，则返回false
       
        return  checkUsername() &&  checkPassword()  &&   checkTel(); 
    }


   


</script>
</body>
</html>