js例子-表单验证

作者: 逻辑演绎法 | 来源:发表于2017-05-22 19:33 被阅读0次

js例子-表单验证
工作中用到的前端框架插件
表单验证课堂笔记
JavaScript 表单验证(邮箱验证例子)
vue-validator
群邮VI - 汇总
群邮 VI - 技术组部分
js表单验证
js 表单验证
js表单验证

<pre>

<!DOCTYPE html>
<html>
  <head>
    <title>表单验证.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
    //如果校验不符合规则,拦截表单的提交
    //1 用户名不能为空,并且长度在6到10位之间.只能以英文字母开头. 用户名中只能使用"_"符号.
        function fun1(){
            var flag = true;
            if(!checkEmail()){
                flag= false;
            }
            if(!checkName()){
                flag= false;
            }
            return flag;
        }
    
        function checkName(){
            //var nameInput= document.getElementsByName("name")[0];
            var nameInput = document.form1.name;
            var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;
            //var name = nameInput.getAttribute("value");
            var name = nameInput.value;//DHTML是在dom的基础上增加了一些属性和方法
            if(!reg.test(name)){
                //校验失败=> 提示用户. 
                //alert("用户需要6到10位,不能以数字开头!");

                addError(nameInput,"用户需要6到10位,不能以数字开头!");
                return false;//拦截表单提交
            }else{
                //验证成功=>清除错误信息
                //alert("正在登陆");
                removeError(nameInput);
                return true;
            }
        }
        
        
        //验证邮箱
        function checkEmail(){
        //1 获得用户输入的邮箱
            var email  = document.form1.email.value;
        //2 定义正则
            var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/g;
        //3 校验
        if(!reg.test(email)){
            //失败=>提示,并返回false
            addError(document.form1.email,"邮箱不符合规则!");
                return false;//拦截表单提交
        }else{
            removeError(email);
            return true;
            }
        }
        
        
        //添加错误
        //参数1 : 标识往那里添加
        //参数2 : 错误信息是什么
        function addError(where,what){
                //调用它的下一个兄弟元素，把值付给
                where.nextSibling.innerHTML=what;
        }

        //清除错误
        function removeError(where){
            where.nextSibling.innerHTML="";
        }

    </script>
  </head>
  
  <body>
  <form action="" name="form1" onsubmit="return fun1();">
            <table border="1" >   
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="name" onblur="checkName();"><font color="red" ></font></td>
                </tr>
                <tr>
                    <td>邮箱:</td>
                    <td><input type="text" name="email" onblur="checkEmail();"><font color="red" ></font></td>
                </tr>  
                <tr>
                    <td colspan="2" align="center" >
                        <input type="submit" value="提交" />
                    </td>
                </tr>               
            </table>
        </form>
  
  </body>
</html>

</pre>