js注册表单验证提取公共方法

最新推荐文章于 2023-01-16 18:47:21 发布

不是张三居士

最新推荐文章于 2023-01-16 18:47:21 发布

阅读量344

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/MissgirlFL/article/details/109660996

版权

js 专栏收录该内容

15 篇文章 8 订阅

订阅专栏

有些时候表单需要验证的太多，可能十个八个，那我们岂不是要写粘贴十个八个方法一个一个改，但是我们可以找到公共方法，进行提取，等到用的时候直接调用就行了

表单样式

<form action="reg" method="post" onsubmit="return submit()">
用户名：<input type="text" name="userName" id="userNameInput" onblur="checkUserName()"/>
       <span id="userNameShow">不能为空且长度在6—18之间</span><br>
密码：<input type="text" name="pwd" id="pwdInput" onblur="checkPwd()"/>
     <span id="pwdShow">数字和字母组合且长度在8-16</span><br>
确认密码：<input type="text" name="confirmPwd" id="confirmPwdInput" onblur="checkConfirmPwd()"/>
         <span id="confirmPwdShow">必须和密码一样</span><br>
年龄：<input type="text" name="age" id="ageInput" onblur="checkAge()"/>
     <span id="ageShow">必须是数字</span><br>
    <input type="submit" value="注册"/>
</form>

公共方法（建一个js文件，里边书写公共方法，方便调用）

 //用户名验证
    function checkUserName(){
        return check('userNameInput','userNameShow',/^[0-9a-zA-Z]{6,18}$/,'不符合用户名规范')
    }
    //密码验证
    function checkUPwd(){
        return check('pwdInput','pwdShow',/^[0-9a-zA-Z]{6,18}$/,'不符合密码规范')
    }
    //年龄验证
    function checkAge(){
        return check('ageInput','ageShow',/^[0-9]{3}$/,'年龄必须是数字')
    }
    //确认密码验证
    //因为逻辑与其他验证不一样所以写的也不一样，确认密码第一是要符合密码格式，二是要输入的和密码一样
    function checkConfirmPwd() {
        //获取内容
        var confirmPwd =document.getElementById("confirmPwdInput").value;
        var confirmPwdShow =document.getElementById("confirmPwdShow");
        var pwd =document.getElementById("pwdInput").value;
        //判断所输入是否符合格式
        if(check('','',/^[0-9a-zA-Z]{8,16}$/)){
           //判断输入是否与密码全同 三个等号
           if(pwd===confirmPwd){
               //相等
               confirmPwdShow.innerText='验证通过';
               confirmPwdShow.style.color='green';
           } else {
               //不相等
               confirmPwdShow.innerText='不符合规范';
               confirmPwdShow.style.color='red';
           }
        }else {
            //不符合密码规范 默认它不符合规范
            confirmPwdShow.innerText='不符合规范';
            confirmPwdShow.style.color='red';
        }
    }
    //提交判断
    function submit() {
        if(checkUserName()&&checkPwd()&&checkConfirmPwd()&&checkAge()){
            //返回true则可以提交
            return true;
        }else {
            //返回false则可以提交
            return false;
        }
    }
    
</script>

引用公共方法

<head lang="en">
    <meta charset="UTF-8">
    <title>注册表单验证</title>
    <script src="js\publicTetst"><script>
</head>

这边只是提供一个方法，并不是全部，有再多验证的照着这个方法是可以的

不是张三居士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录