1. Non-empty check only
view
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" style="text-align: left;">
<el-form-item label="身份证" prop="idCard">
<el-input v-model="ruleForm.idCard" clearable></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="tel">
<el-input v-model="ruleForm.tel" clearable></el-input>
</el-form-item>
<el-form-item label="短信验证码" prop="telcode">
<el-input v-model="ruleForm.telcode" clearable></el-input>
<el-button @click.native.prevent="getTelCode" type="primary" >获取</el-button>
</el-form-item>
<el-form-item label="密码" prop="pwd">
<el-input v-model="ruleForm.pwd" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click.native.prevent="submitForm" :loading="loading">提交</el-button>
<el-button @click.native.prevent="resetForm" >重置</el-button>
</el-form-item>
</el-form>
js
return {
ruleForm: {
idCard: '',
tel: '',
telcode:'',
pwd: '',
},
loading:false,
rules:{
idCard:[
{
required:true,
message:'身份证号不能为空',
trigger:'blur'
}
],
tel:[
{
required:true,
message:'联系电话不能为空',
trigger:'blur'
}
],
telcode:[
{
required:true,
message:'短信验证码不能为空',
trigger:'blur'
}
],
pwd:[
{
required:true,
message:'密码不能为空',
trigger:'blur'
}
],
}
}
},
2. Non-empty + format check
view
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" style="text-align: left;">
<el-form-item label="身份证" prop="idCard">
<el-input v-model="ruleForm.idCard" clearable></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="tel">
<el-input v-model="ruleForm.tel" clearable></el-input>
</el-form-item>
<el-form-item label="短信验证码" prop="telcode">
<el-input v-model="ruleForm.telcode" clearable></el-input>
<el-button @click.native.prevent="getTelCode" type="primary" >获取</el-button>
</el-form-item>
<el-form-item label="密码" prop="pwd">
<el-input v-model="ruleForm.pwd" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click.native.prevent="submitForm" :loading="loading">提交</el-button>
<el-button @click.native.prevent="resetForm" >重置</el-button>
</el-form-item>
</el-form>
js
data() {
let idCardReg=(rule,value,callback)=>{
this.ruleForm.idCard=value;
if(this.ruleForm.idCard!=""){
const reg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(reg.test(value)){
return callback();
}else{
return callback(new Error('身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X'));
}
}else{
return callback(new Error('请输入身份证'))
}
}
return {
ruleForm: {
idCard: '',
tel: '',
telcode:'',
pwd: '',
},
loading:false,
rules:{
idCard:[
{
trigger:'blur',
validator:idCardReg,
}
],
tel:[
{
required:true,
message:'联系电话不能为空',
trigger:'blur'
}
],
telcode:[
{
required:true,
message:'短信验证码不能为空',
trigger:'blur'
}
],
pwd:[
{
required:true,
message:'密码不能为空',
trigger:'blur'
}
],
}
}
},