JAVA EE-JS-表单验证

最新推荐文章于 2021-02-27 13:21:32 发布

Thingvellir

最新推荐文章于 2021-02-27 13:21:32 发布

阅读量854

点赞数

分类专栏： Java-EE

本文链接：https://blog.csdn.net/Thingvellir/article/details/52560008

版权

Java-EE 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

JS-表单验证

敢于冲撞命运才是天才。 —— 雨果

先看一下最后的效果。
这里写图片描述

我们首先完成表单部分

<body>
        <form action="" name="form1"  onsubmit="return fun1();"   >
            <table border="1" width="30%" >
                <tr>
                    <th colspan="2" align="center" >
                        用户注册
                    </th>
                </tr>   
                <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" /><font color="red" ></font></td>
                </tr>     
                <tr>
                    <td colspan="2" align="center" >
                        <input type="submit" value="提交" />
                    </td>
                </tr>               
            </table>
        </form>
  </body>

下面是验证的逻辑以及代码

<script type="text/javascript">
        //如果校验不符合规则,拦截表单的提交
            //1 用户名不能为空,并且长度在6到10位之间.只能以英文字母开头. 用户名中只能使用"_"符号.
            function fun1(){
                var flag = true;

                if(!checkEmail()){
                flag =  false;
                }

                if(!checkName()){
                flag =  false;
                }
                 alert(flag);
                 return flag;
            }
            //验证邮箱
            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(document.form1.email);
                return true;
            }

            }
            //验证用户名
            function checkName(){
            //1 获得文本输入框中的内容
                    //var nameInput=    document.getElementsByName("name")[0];
                    var nameInput = document.form1.name;

                    //var name = nameInput.getAttribute("value");
                    var name = nameInput.value;  //DHTML属性 
                //2 定义正则表达式对象
                var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;
                //3 校验
                if(!reg.test(name)){
                    //校验失败=> 提示用户. 
                    //alert("用户需要6到10位,不能以数字开头!");
                    addError(nameInput,"用户需要6到10位,不能以数字开头!");
                    return false;//拦截表单提交
                }else{
                    //验证成功=>清除错误信息
                    removeError(nameInput);
                    return true;
                }
                }
                //添加错误
                //参数1 : 标识往那里添加
                //参数2 : 错误信息是什么
                function addError(where,what){
                        where.nextSibling.innerHTML=what;
                }
                //清除错误
                function removeError(where){
                    where.nextSibling.innerHTML="";
                }
        </script>

Thingvellir

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVA EE-JS-表单验证

JS-表单验证敢于冲撞命运才是天才。 —— 雨果先看一下最后的效果。我们首先完成表单部分<body> <form action="" name="form1" onsubmit="return fun1();" > <table border="1" width="30%" > <tr>
复制链接

扫一扫