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

<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("输入正确");
}