• JS正则表达式验证表单


    一.解释一些符号相关的意义
         1.  /^$/ 这个是个通用的格式。
             ^ 匹配输入字符串的开始位置;$匹配输入字符串的结束位置
         2. 里面输入需要实现的功能。
            * 匹配前面的子表达式零次或多次;
           + 匹配前面的子表达式一次或多次;
           ?匹配前面的子表达式零次或一次;
           d  匹配一个数字字符,等价于[0-9]

    二、常用的表单验证代码

     checkUserNameflag=false;
     checkPasswordflag=false;
     checkPasswordAgianflag=false;
     checkEmailflag=false;
    // 用户名校验
    function checkUserName() {
        var username = $("userNeme").value;
        var zz = /^[A-Za-z0-9]{6,}$/;
        if (!zz.test(username)) {
            $("userName_warn").innerHTML = "  × 用户名不符合规范";
            checkUserNameflag=false;
        } else {
            /*$("userName_warn").style.color='blue';
            $("userName_warn").innerHTML = "√ 用户名可用";*/
            showUserExist(username);
            checkUserNameflag=true;
        }
    }
    
    //重置提示
    function resetWarn(){
        $("userName_warn").innerHTML="";
        $("email_warn").innerHTML="";
        $("password_warn").innerHTML="";
        $("Repassword_warn").innerHTML="";
    }
    // 密码校验
    function checkPassword() {
        var password1 = $("password").value;
        if (password1.length >= 6 && password1.length <= 15) {
            checkPasswordflag = true;
            $("password_warn").style.color='blue';
            $("password_warn").innerHTML = "  √ 密码可用 ";
            checkAgianMiMa();
        } else {
            checkPasswordflag = false;
            $("password_warn").innerHTML = "  × 密码至少为 6 个字符 ";
        }
    }
    
    function checkPasswordAgian() {
        var password1 = $("password").value;
        var password2 = $("rePassword").value;
        if (password1 == password2) {
            if (password1 == "") {
                $("Repassword_warn").innerHTML = "  × 请输入密码 ";
                checkPasswordAgianflag = false;
                return;
            }
            
            $("Repassword_warn").style.color='blue';
            $("Repassword_warn").innerHTML = "√ 重复输入密码正确";
            checkPasswordAgianflag = true;
        } else {
            checkPasswordAgianflag = false;
            $("Repassword_warn").innerHTML = "  × 两次密码输入不同 ";
            
        }
    }
    
    function checkEmail(){
        //对电子邮件的验证
          var myreg = /^([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
          var email=$("email").value;
          if(!myreg.test(email)){
                checkEmailflag=false;
                  $("email_warn").style.color='red';
                $("email_warn").innerHTML = "  × 邮箱格式不符合规范";
            } else {
                checkEmailflag=true;
                $("email_warn").style.color='blue';
                $("email_warn").innerHTML = "√ 邮箱格式正确";
            }
    }
    
    function submitCheck(){
        alert(checkUserNameflag);
        if(checkUserNameflag==false || checkPasswordflag==false || checkPasswordflag==false
                ||checkPasswordAgianflag==false || checkEmailflag==false){
            return;
        }
    }
    function $(id){
        return document.getElementById(id);
    }
  • 相关阅读:
    HTML5触屏版多线程渲染模板技术分享
    Yii2使用驼峰命名的形式访问控制器
    记一次MySQL中Waiting for table metadata lock问题的处理
    Mac下安装配置NMP环境
    Mac安装PHP(Homebrew/php弃用、其他第三方tap也已经弃用或者迁移后的安装配置方案)
    PHPStorm等编辑器debug调试(包括使用postman、soapUI)
    NoSQL数据库浅析
    PHP的抽象类和抽象方法以及接口总结
    Yii2中使用Soap WebSerivce
    Yii2之发送电子邮件
  • 原文地址:https://www.cnblogs.com/zyw-205520/p/3327171.html
Copyright © 2020-2023  润新知