element表单验证及清除校验
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<el-form class="task-dialog-form" :model="againForm" :rules="againRules" size="small" ref="againForm" label-width="80px">
<el-row>
<el-col :span="22">
<el-form-item label="友好度" prop="value" class="box-range" ref="againValue">
<div class="item-right rot-core" style="padding-top:7px;">
<el-rate v-model="againForm.value" :texts="rateTexts" @change="changeRate" show-text>
</el-rate>
<!-- <span class="rate-text" v-if="value == 0">请评分</span> -->
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="22">
<el-form-item label="备注" prop="againText" class="box-range">
<el-input type="textarea" :rows="6" maxlength="500" size="small" placeholder="请输入" v-model="againForm.againText"></el-input>
<span class="box-range-span">{{againForm.againText?againForm.againText.length:0}}/500</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="22">
<el-form-item label="备注" prop="phone" class="box-range">
<el-input type="text" size="small" placeholder="请输入" v-model="againForm.phone"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
js中
import * as elValudate from '@/assets/js/elValidate' // 引入自定义校验方法
data(){
// 行内自定义校验
var validatePass = (rule, value, callback) => {
if (value === '' || value == undefined || value == 0) {
callback(new Error('请点击选择评分'));
}
callback();
};
return {
againForm:{},
againRules:{
againText:[
{ required: true, message: '请输入备注', trigger: 'blur' },
],
value:[
// { required: true, message: '请点击进行评分', trigger: 'blur' },
{validator:validatePass,trigger: 'change'},
],
phone:[
{validator:elValudate.elValidatePhone,trigger: 'blur'},
]
}
}
},
mounted(){
this.clearValidate('againForm') // 清除整个表单的校验
this.clearValidate('againValue') // 清除againValue的校验
},
methods : {
clearValidate(formName) {
this.$refs[formName].clearValidate();
},
}
自定义校验文件 elValidate.js
// 手机号
export function elValidatePhone(rule, value, callback) {
if (value == '') {
return callback(new Error('手机号码不能为空'))
} else {
let re = /^1[23456789]\d{9}$/;
if (!re.test(value)) {
return callback(new Error('手机号码输入格式有误'))
}
return 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 个月前
更多推荐
已为社区贡献10条内容
所有评论(0)