vue+Element中手机、密码及邮箱验证

验证首先有需要验证的对象

账号注册的点击按钮

<el-button @click="newuse">账号注册</el-button>

随随便便一个简单的点击事件

html中写个弹框

<el-dialog title="注册账号" :visible.sync="newsuser" width="30%"  @close="resetForm('form')">
   <el-form ref="form" :model="form" :rules="rules" label-width="70px">
    <el-form-item label="手机号" prop="phone">
     <el-input v-model="form.phone"></el-input>
    </el-form-item>
     <el-form-item label="密码" prop="apass">
     <el-input type="password" v-model="form.apass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item  label="确认密码" prop="checkPass">
     <el-input type="password" v-model="form.checkPass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
     <el-input v-model="form.email"></el-input>
    </el-form-item>
   </el-form>
   <span slot="footer" class="dialog-footer">
    <el-button @click="newsuser = false">取 消</el-button>
    <el-button type="primary" @click="saveEdit">确 定</el-button>
   </span>
  </el-dialog>

这么多也就够了，接下来是script

export default{
	data:function(){
		/* 密码输入验证 */
   var validatePass = (rule, value, callback) => {
           if (value === '') {
             callback(new Error('请输入密码'));
           } else {
             if (this.form.checkPass !== '') {
               this.$refs.form.validateField('checkPass');
             }
             callback();
           }
         };
   /* 密码重复验证 */
         var validatePass2 = (rule, value, callback) => {
           if (value === '') {
             callback(new Error('请再次输入密码'));
           } else if (value !== this.form.apass) {
             callback(new Error('两次输入密码不一致!'));
           } else {
             callback();
           }
     }
	}
}

这里不需要管手机与邮箱，这里是对写入数据的验证，没有规则验证

接下来依旧是在**data：function{}**中，验证手机和邮箱规则

return{
	newuser:false,
	form:{},
	rules:{   
	phone: [{
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
   validator: 'validateUsername'},{ min: 11, max: 11, message: '输入正确的手机号', trigger: 'blur'
     }],
      apass: [{ 
       validator: validatePass, trigger: 'blur' 
       }],
      checkPass: [{ 
       validator: validatePass2, trigger: 'blur' 
      }],
      email: [{
         required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']
      }]
	}
}

最后就是点击事件的弹框了

methods：{
	newuse() {
    this.newsuser = true;
   },
}

是不是很简单？