正则表达式常用验证规则实例

本文详细介绍了用户在网站上注册时填写的表单验证过程,包括用户名、手机号、验证码、邮箱和密码的验证规则,确保用户输入的数据符合特定格式。

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

<div id="cd-signup"> <!-- 注册表单 -->
    <form class="cd-form" id = "form1">
        <p class="fieldset">
            <p v-show="showTishi">{{tishi}}</p>  
            <label class="image-replace cd-username" for="signup-username" style="margin:-200px 0px 0px 23px">用户名</label>
            <input class="full-width has-padding has-border" id="signup-usernamee" type="text" placeholder="请输入用户名" v-model="newUsername">
        </p>
        <p class="fieldset">
            <label class="image-replace cd-username" for="signup-username">手机号</label>
            <input class="full-width has-padding has-border" id="usertel" type="phone" placeholder="请输入手机号" v-model="newPhone">
        </p>
            
        <p class="fieldset">
            <label class="image-replace cd-email" for="signup-email">验证码</label>
            <input class="full-width has-padding has-border" id="signup-email" type="text" placeholder="请输入手机验证码"><input type="button" id="send" value="获取验证码" />
        </p>
        
        <p class="fieldset">
            <label class="image-replace cd-email" for="signup-email">邮箱</label>
            <input class="full-width has-padding has-border" id="emaill" type="email" placeholder="请输入mail" v-model="newEmail">
        </p>

        <p class="fieldset">
            <label class="image-replace cd-password" for="signup-password">密码</label>
            <input class="full-width has-padding has-border" id="userpw" type="password"  placeholder="请输入密码" v-model="newPassword">
        </p>

        <p class="fieldset">
            <label class="image-replace cd-password" for="signup-password">确认密码</label>
            <input class="full-width has-padding has-border" id="reuserpw" type="password"  placeholder="请输入密码">
        </p>

        <p class="fieldset">
            <input type="checkbox" id="accept-terms" checked="">
            <label for="accept-terms">我已阅读并同意 <a href="#0">用户协议</a></label>
        </p>

        <p class="fieldset">
            <input class="full-width2" type="button" value="注册新用户"v-on:click="register">
        </p>
    </form>
</div>

//用户名验证

var user=$("#signup-usernamee").val();
var username=/^[a-z]{6,10}/i;
if(user.length==0){
      // $("#error1").html("账号不可以为空");
      alert("账号不可以为空");
      return false;
}else if(!username.test(user)){
      // $("#error1").html("请输入6-10的字母");
      alert("请输入6-10的字母")
      return false;
}else{
        $("#error1").html("输入正确");
}
 //电话号码验证                    
var telephone=$("#usertel").val();
var telephone1=/^[1][3-9][0-9]{9}/;
if(telephone.length==0){
      // $("#error6").html("电话不可以为空");
      alert("电话不可以为空")
      return false;
}else if(!telephone1.test(telephone)){
      // $("#error6").html("请输入合法电话");
      alert("请输入合法电话")
      return false;
}else{
      $("#error6").html("输入正确");
}

//邮箱验证

var email=$("#emaill").val();
var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
if(email.length==0){
      alert("请输入电子邮件")
      return false;
}else if(!email1.test(email)){
      alert("请输入合法电子邮件");
      return false;
}else{
       $("#error5").html("输入正确");
}

//密码验证

var password=$("#userpw").val();
var password1=/(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{6,12}/;
if(password.length==0){
      // $("#error2").html("密码不可以为空");
      alert("密码不可以为空")
      return false;
}else if(!password1.test(password)){
      // $("#error2").html("请输入6-12位的数字密码");
      alert("请输入6-12位的数字和字母密码");
      return false;
}else{
      $("#error2").html("输入正确");
}
                         
var repassword=$("#reuserpw").val();
var password=$("#userpw").val();
if(repassword != password){
      // $("#error2").html("密码不可以为空");
      alert("两次密码不一致")
       return false;
}else{
      $("#error2").html("输入正确");
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值