客户端表单校验

极乐码农

已于 2022-08-28 11:57:05 修改

阅读量229

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2020-02-28 01:53:02 首次发布

本文链接：https://blog.csdn.net/weixin_43216437/article/details/104548590

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

inpuvalidation.html onblur事件的

      //获取父节点来获得span  
      获得的span不管是多少个都是数组形式 所以下面用的时候用的是spans[0]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <script type="text/javascript">
        function dataValidation() {
            /*设置是否提交的标志*/
            var isSubmit=true;
            /*获得表单每一个input*/
            var inputs=document.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                var inputObj=inputs[i];
                //排除最后一个input
                if (inputObj.type!='submit') {
                    //获得正则表达式
                   var req=inputObj.getAttribute('req');
                   //获得文字说明tip
                   var tip = inputObj.getAttribute('tip');
                   //将正则表达式转化成正则对象
                   var reqObj=new RegExp(req);
                   //获取表单里的值
                   var  value=inputObj.value;
                   //进行正则校验
                    if (!reqObj.test(value)) {
                        //获取父节点来获得span  获得的span不管是多少个都是数组形式 所以下面用的时候用的是spans[0]
                        var spans = inputObj.parentNode.getElementsByTagName('span');
                        //循环将tip嵌入到每一个span中
                        spans[0].innerHTML = "<font color='red'>" + tip + "</font>";
                        isSubmit = false;
                    } else {
                        var spans = inputObj.parentNode.getElementsByTagName('span');
                        spans[0].innerHTML = "";
                    }
                }
            }
            return isSubmit;
        }
        function register(obj) {
            //获得正则
            var reg=obj.getAttribute('req');
            //获得提示语
            var tip=obj.getAttribute('tip');
            //将正则转化为正则表达式对象
           var regObj=new RegExp(reg);
            //获取值
            var  value=obj.value;
            //获取父节点td
            var  td=obj.parentNode;
            if (!regObj.test(value)) {
                //更加父节点获取span对象
                var spans = td.getElementsByTagName('span');
                spans[0].innerHTML = "<font color='red'>" + tip + "</font>";
            } else {
                var spans = td.getElementsByTagName('span');
                spans[0].innerHTML = "";
            }
        }
    </script>
</head>
<body>
<form action="input_validation.html" method="post" onsubmit="return dataValidation()">
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" req="^[\u4e00-\u9fa5]{3,6}$" tip="请输入3-6位中文" onblur="register(this)"><span></span></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" req="^\w{6,8}$" tip="请输入6-8位数字、字母或者下划线" onblur="register(this)"><span></span></td>
        </tr>
        <tr>
            <td>地址：</td>
            <td><input type="text" req="^[\u4e00-\u9fa5]{2,50}$" tip="请输入2-20位中文" onblur="register(this)"><span></span></td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td><input type="text" req="^1?[0,9][0,9]?$" tip="请输入0-199之间的数字" onblur="register(this)"><span></span></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text" req="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" tip=
                    "请输入正确的格式如：example@126.com" onblur="register(this)"><span></span></td>
        </tr>
    </table>
            <input type="submit" value="注册">
</form>
</body>
</html>

onfocus事件的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <script type="text/javascript">
        function formSubmim() {
            var isSubmit=true;
            var inputs=document.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
               var inputObj=inputs[i];
                if (inputObj.type != 'submit') {
                    var reg=inputObj.getAttribute('reg');
                    var tip = inputObj.getAttribute('tip');
                    var  valueString=inputObj.value;
                    var td=inputObj.parentNode;
                    var regObj=new RegExp(reg);
                    if (!regObj.test(valueString)) {
                        var spans = td.getElementsByTagName('span');
                        spans[0].innerHTML = '<font color="red">' + tip + '</font>';
                        isSubmit = false;
                    } else {
                        var spans = td.getElementsByTagName('span');
                        spans[0].innerHTML = "";
                    }
                }
            }
            return isSubmit;
        }
        function register(obj) {
            var reg = obj.getAttribute('reg');
            var regObj=new RegExp(reg);
            var tip = obj.getAttribute('tip');
           var valueString= obj.value;
           var td=obj.parentNode;
            if (!regObj.test(valueString)) {
                var spans = td.getElementsByTagName('span');
                spans[0].innerHTML = '<font color="red">' + tip + '</font>';
            } else {
                var sapns = td.getElementsByTagName('span');
                spans[0].innerHTML = "";
            }
        }
    </script>
</head>
<body>
<form action="form.html" method="post" onsubmit="return formSubmim()">
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" reg="^[\u4e00-\u9fa5]{3,6}$" tip="请输入3-6位中文字符" onfocus="register(this)">&nbsp;<span></span></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" reg="^\w{6,8}$" tip="请输入6-8位字母、数字或者下划线"onfocus="register(this)">&nbsp;<span></span></td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td><input type="text" reg="^1?[0,9][0,9]?$" tip="请输入0-199之间的数字" onfocus="register(this)">&nbsp;<span></span></td>
        </tr>
        <tr>
            <td>地址：</td>
            <td><input type="text" reg="^[\u4e00-\u9fa5]{2,20}$"tip="请输入2-20位中文字符" onfocus="register(this)">&nbsp;<span></span></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text" reg="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"
                       tip="请输入正确的邮件格式：example.qq.com" onfocus="register(this)">&nbsp;<span></span></td>
        </tr>
        <tr>
            <td><input type="submit" value="注册"></td>
        </tr>
    </table>
</form>
</body>
</html>