js如何使用正则来验证表单提交的内容是否合法

 

步骤:

1. 先在form表单上添加 onsubmit 事件(该事件返回true则会提交到服务器,返回false则拒绝提交)

2. 找到要验证的那个input的节点(使用id也行,用name名也行,案例是查找的name名)

3. 编写onsubmit事件return的方法(判断另外那个正则函数验证返回的是true还是false)

4. 正则验证写一个函数,并且return一个true,或者false 方便第三步判断使用

 

案例代码:

<body>
    <!-- onsubmit事件是在表达被提交时触发 -->
    <form action="index.php" method="post" onsubmit="return checkUser()">
       <input type="text" name="username" value=""><span id="msg"></span><br>
        <input type="submit" name="" value="提交">
    </form>
    <script type="text/javascript">
        var oUserName = document.getElementsByName(username)[0];
        var oMsg = document.getElementById(msg);//显示信息的
        function checkUser(){
            var res = jcUser();
            if (res == true) {
                return true;
            }else{
                return false;
            }
        }

        function jcUser(){
            var reg = /^[a-z]\w{5,19}$/;//用户名规则是6-20位 小写字母开头
            var result = reg.test(oUserName.value);
            if (result) {
                oMsg.innerHTML = <font color="greeg">用户名可以使用</font>;
                return true;
            }else{
                oMsg.innerHTML = <font color="red">用户名不合法</font>;
                return false;
            }
        }

    </script>

</body>

 

js如何使用正则来验证表单提交的内容是否合法

上一篇:Webpack 安装与第一个Demo


下一篇:webpack_mini-css-extract-plugin的使用