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

本文介绍了一种前端表单验证的方法,包括用户名、密码、邮箱等字段的有效性检查。通过正则表达式进行格式匹配,并使用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);
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值