zoukankan      html  css  js  c++  java
  • JS表单验证

    JavaScript 表单验证

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

    被 JavaScript 验证的这些典型的表单数据有:

    • 用户是否已填写表单中的必填项目?
    • 用户输入的邮件地址是否合法?
    • 用户是否已输入合法的日期?
    • 用户是否在数据域 (numeric field) 中输入了文本?

    JS表单验证包括:非空验证、相等验证、范围验证、正则验证

    1.非空验证

    <body>
    <form action="../../重要练习题/JS控制页面的几个例子/单击表格改变颜色.html" method="get">   <!--表单<form></form>这里method代表提交方式是隐藏还是显示-->
    <input type="text" name="abc" id="abc" />
    <br />
    <br />
    <input type="submit" value="提交" onclick="return check()" />   <!--在这里要注意,是先进行点击事件,然后根据点击事件的返回值来确定是否进行提交命令,如果返回值为true,它会进行提交,如果返回值为false,它会阻止提交-->
    </form>
    
    </body>
    <script type="text/javascript">
    
    function check(){
        var a = document.getElementById("abc");
        if(a.value==""){
            alert("用户名不能为空");
            return false;    
        }else{
            return true;
        }
    }

    当对话框中输入123时会进行提交,然后进行页面跳转

    当对话框为空时

    <body>
    <form action="../../重要练习题/JS控制页面的几个例子/单击表格改变颜色.html" method="get">  
    <input type="text" name="abc" id="abc" onblur="yanzheng()" />   <!--onblur,失去焦点时触发-->
    <span id="tishi"></span>
    <br />
    <br />
    <input type="submit" value="提交" onclick="return check()" /> 
    </form>
    
    </body>
    <script type="text/javascript">
    
    function check(){
        var a = document.getElementById("abc");
        if(a.value==""){
            alert("用户名不能为空");
            return false;
        }else{
            return true;
        }
    }
    
    
    function yanzheng(){
        var a = document.getElementById("abc");
        var b = document.getElementById("tishi");
        if(a.value==""){
            b.innerText = "用户名不能为空!";
            b.style.color = "red";
        }else{
            b.innerText = "用户名可以使用!";
            b.style.color = "blue";
        }
    }
    
    </script>

    2.相等验证

    <body>
    <input type="text" name="abc" id="abc" />
    <br />
    <br />
    <input type="text" name="def" id="def" onblur="xiangdeng()" />
    </body>
    <script type="text/javascript">
    
    function xiangdeng(){
        var a = document.getElementById("abc");
        var b = document.getElementById("def");
        
        if(a.value == b.value){
            alert("两次输入的信息一致");
        }else{
            alert("两次输入的信息不一致");
        }
    }

    3.范围验证

    <body>
    
    <input type="text" name="age" id="age" onblur="nianling()"/>
    
    </body>
    <script type="text/javascript">
    
    function nianling(){
        var a = document.getElementById("age");
        if(parseInt(a.value)>=18 && parseInt(a.value)<=25){
            alert("ok");
        }else{
            alert("超过年龄范围!")
        }
    }

    4.正则验证

    定界符:/^正则表达式$/
    匹配开头:^
    匹配结尾:$
    *代表前面的表达式可以出现N次,N>=0 (例如:a*)
    +代表前面的表达式至少出现一次,N>=1(例如:a+)
    ?代表前面的表达式最多出现一次 ,N<=1 (例如:a?)


    {n}代表前面的表达式确定出现n次 (例如:a{5}代表a必须出现5次)
    {n,}代表前面的表达式最少出现n次   (例如:a{5,}代表a最少出现5次,多了不限)

    {n,m}代表前面的表达式最少出现n次,最多出现m次 (例如:a{5,10}代表a最少出现5次,最多出现10次)
    x|y 代表匹配x或者y


    [abc]代表匹配abc里面的任意一个

    [^abc]代表匹配除了abc里面的任意一个

    [a-z]代表匹配所有的小写字母里面的任意一个

    [0-9]代表0-9之间的任意一个

    常见字符:
    d 代表任意一个数字字符,等价于[0-9]

    D 代表任意一个非数字字符,等价于[^0-9]

    代表一个换行符

    代表一个回车符

    s  代表任意一个不可见字符,包括空格,换页符等

    S 代表任意一个可见字符

    w 代表包括下划线的任意单词字符,等价于[A-Za-z0-9]

    例子:邮箱,必须包括@和.,123456@qq.com

    <body>
    
    <input type="text" name="email" id="email" onblur="youxiang()" />
    
    </body>
    <script type="text/javascript">
    
    function youxiang(){
        var e = document.getElementById("email");
        if(e.value.match(/^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/)==null){  //e.value代表字符串,e.value.match()代表字符串的匹配,null是空的意思
            alert("邮箱格式不正确");
        }else{
            alert("邮箱格式正确");
        }
    }

    常用的正则表达式:

    手机号:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$

    15或者18位身份证号:^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$

    邮箱号:^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$

  • 相关阅读:
    [][]
    Spark笔记04
    Spark笔记03
    Spark笔记02
    Spark笔记01
    【熟能生巧】使用Screw快速生成数据库文档
    记一次关于jdbcTemplate.queryForList快速Debug及感悟
    【从零单排】Exception实战总结1
    【从零单排】Java性能排查实战模拟
    【从零单排】关于泛型Generic的一些思考
  • 原文地址:https://www.cnblogs.com/sutao/p/7065979.html
Copyright © 2011-2022 走看看