一些正则验证(原生和element ui 自带的表单验证)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
后续如果有需要还会补上他的
1.验证手机号码,当用户输入的手机号不符合要求,在输入框失去焦点的时候,清空用户输入的消息
显示的提示如下,使用的 element ui 的框架
代码如下
html部分
<el-form-item label="手机号">
<el-input v-model="searchComsuption.usePhone" placeholder="请输入手机号" @blur="blueText($event)" maxlength="11"></el-input>
</el-form-item>
主要的是这里的 @blur="blueText($event)"
事件
js部分,在methods
方法里面写
blueText(e) {
if (!/^1[3456789]\d{9}$/.test(e.target.value)) {
this.$message.warning("请输入正确手机号");
this.searchComsuption.usePhone = "";
}
},
2.输入正整数的验证
<el-form-item label="逾期天数" >
<el-input v-model="alreadySearch.debtDateStart" placeholder='天数' @blur="blueText($event)"></el-input>
</el-form-item>
blueText(e) {
let boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value);
if (!boolean) {
this.$message.warning("请输入正整数");
this.alreadySearch.debtDateStart = "";
}
},
3.下面放一个使用element ui
自带的表单验证
效果图如下
注意用黄色框框标注的,都是要写的, prop 要和 v-model绑定的属性相同
<el-form ref="addMerchant" :model="addMerchant" :rules="rules" :inline="true" size="medium">
<el-col :span="14" >
<el-row>
<el-col :span="12">
<el-form-item label="商户名称" prop="merchantName">
<el-input v-model="addMerchant.merchantName" placeholder="请输入商户名称" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" >
<el-form-item label="输入密码" prop="password">
<el-input placeholder='请输入密码' v-model="addMerchant.password" type="password" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="所属公司" prop="companyName">
<el-input v-model="addMerchant.companyName" placeholder="请输入所属公司" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="确认密码" prop="confirmPwd">
<el-input placeholder='请重新输入密码' v-model="addMerchant.confirmPwd" type="password" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
</el-form-item>
<!-- <el-form-item label="有效期截止日" prop="endTime">
<el-date-picker
v-model="addMerchant.endTime"
type="date"
placeholder="请选择有效期截止日">
</el-date-picker>
</el-form-item> -->
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="法人姓名" prop="companyLegalPerson">
<el-input v-model="addMerchant.companyLegalPerson" placeholder="请输入法人姓名" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="联系手机" prop="companyPhone">
<el-input v-model="addMerchant.companyPhone" placeholder="请输入商户登录账号" maxlength="11" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div style="text-align: left;margin-top:32px;margin-left:26%">
<el-button type="primary" @click="addMerchantSumbit()">提交</el-button>
<span> </span>
<el-button type="danger" @click="addMerchantCancel()">取消</el-button>
</div>
</el-col>
</el-row>
</el-col>
</el-form>
data里面rules的判断规则
return {
addMerchant: {
password:'',
confirmPwd:'',
},
rules: {
merchantName: [{required: true, message: "请输入商户名称", trigger: "change"}],
companyName: [{required: true, message: "请输入所属公司", trigger: "change"}],
companyLegalPerson: [{required: true, message: "请输入法人姓名", trigger: "change"}],
idFrontImg: [{required: true, message: "请上传身份证正面", trigger: "change"}],
idBackImg: [{required: true, message: "请上传身份证反面", trigger: "change"}],
companyLicense: [{required: true, message: "请上传营业执照", trigger: "change"}],
companyPhone: [{required: true, validator: validatePhone, trigger: "change"}],
password: [{required: true, validator: validateNew, trigger: 'blur' }],
confirmPwd: [{required: true, validator: validateSure, trigger: 'blur' }]
}
}
当element ui
提供的验证不满足需求的时候,我们可以自定义验证
在data
里面,在return
外面写这样代码
let validatePhone = (rule, value, callback) => {
if (value === '') {
callback(new Error('手机号不能为空'));
} else if(!(/^1[34578]\d{9}$/.test(value))) {
callback(new Error('请输入正确的手机号'))
} else {
callback();
}
};
let validateName = (rule, value, callback) => {
if(value === ''){
callback(new Error('内容不可为空'))
}else if(/^\s*$/.test(value)){
callback(new Error('内容不可全为空格'))
}else{
callback()
}
};
let validateNew = (rule, value, callback) => {
if (/[\u4e00-\u9fa5]/.test(value)) {
callback(new Error("密码不可为中文"));
} else if (/\s+/g.test(value)) {
callback(new Error("密码不可为空格"));
} else if(value === ''){
callback(new Error('密码不能为空'));
}else{
callback();
}
};
let validateSure = (rule, value, callback) => {
if (value === '') {
callback(new Error('确认密码不能为空'));
} else if(value != this.addMerchant.password) {
callback(new Error('两次密码输入的不一致'));
} else {
callback();
}
};
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)