JS正则表达式验证表单数据

最新推荐文章于 2022-06-15 21:22:50 发布

J-wen

最新推荐文章于 2022-06-15 21:22:50 发布

阅读量507

点赞数

CC 4.0 BY-SA版权

分类专栏：表达式文章标签：正则表达式表单函数数据 javascript

本文链接：https://blog.youkuaiyun.com/tianjunwenhappy/article/details/55657132

表达式专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种前端表单验证的方法，包括用户名、密码、邮箱等字段的有效性检查。通过正则表达式进行格式匹配，并使用JavaScript实现了即时反馈提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用的验证方法：

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);
}