zoukankan      html  css  js  c++  java
  • js案例之使用正则表达式进行验证数据正确性

    js案例之使用正则表达式进行验证数据正确性


    代码上传至
    "GitHub"


    样例:

    		<tr>
            <td>密码:</td>
            <td>
                <div data-toggle="tooltip" data-placement="right" title="请输入6位密码,必须含有英文">
                    <input type="password" class="form-control" name="password" id="password" onblur="checkPass()">
                </div>
                <span id="passId"></span>
            </td>
        </tr>
    

    提示框的是使用bootstrap进行提示:具体代码--->

    <div data-toggle="tooltip" data-placement="right" title="请输入6位密码,必须含有英文">
                    <input type="password" class="form-control" name="password" id="password" onblur="checkPass()">
                </div>
    

    使用js的函数 onblur(),具体用法:onblur="checkPass()",当鼠标失去焦点的时候,自动执行该方法.

    /**
             * 校验密码,一般为6位,全部为数字
             */
            function checkPass() {
                var password=document.getElementById("password").value;
                var regx=/^w{6}$/;
                if (password.length>0){
                    if (regx.test(password)){
                        passId.innerHTML="正确".fontcolor("green");
                        return true;
                    }else {
                        passId.innerHTML="密码错误".fontcolor("red");
                        return false;
                    }
                }else{
                    passId.innerHTML="您没有输入密码,请输入".fontcolor("red");
                    return false;
                }
            }
    
    正则表达式的使用一般使用test方法进行测试即可,另外还有一种方法,用到的时候直接上网上百度即可,推荐的文章
    

    "js正则表达式进行注册等信息校验"

    1. 使用document.getElementById方法获取到用户输入的信息
    2. 定义正则表达式规则。但是需要注意不用加“”,当定义正确后,idea环境下在最下脚会有提示是正则表达式。
    3. 使用正则表达式的test方法进行校验
    4. 如果检验成功,查找到对应的span元素进行innerHtml属性,进行赋值,然后添加属性fontcolor(“red”);进行提示即可。
    

    其他的都是类似的情况。

    博客网站 https://yamon.top 个人网站 https://yamon.top/resume GitHub网站 https://github.com/yamonc 欢迎前来访问
  • 相关阅读:
    编程能力与编程年龄
    编程能力与编程年龄
    通俗易懂,一篇文章告诉你编程语言是个啥?
    通俗易懂,一篇文章告诉你编程语言是个啥?
    进程与线程的区别:最浅显易懂的解释
    进程与线程的区别:最浅显易懂的解释
    为什么超 80% 的开源开发者苦苦挣扎在贫困线?
    java之异常处理
    33_java之类加载器和反射
    32_java之TCP和UDP
  • 原文地址:https://www.cnblogs.com/chenyameng/p/11536230.html
Copyright © 2011-2022 走看看