element表单校验
表单校验的相关属性:required如果为true,表示该字段为必填message 当不满足设置的规则时的提示信息pattern 正则表达式,通过正则验证值min 当值为字符串时,min表示字符串的最小长度,当值为数字时,min表示数字的最小值max 当值为字符串时,max表示字符串的最大长度,当值为数字时,max表示数字的最大值......
·
通过一个案例来示意:element的表单校验
html部分:
<template>
<div id="app">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!-- 设置prop属性 (校验谁写谁的字段 ) -->
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="数字" prop="num">
<el-input type="text" v-model="ruleForm.num" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
js 部分:
export default {
data(){
var quYu = (rule, value, callback) => { // 数字校验
if (value.length == 0) {
return callback(new Error("数值不能为空,没有请填0"));
}
if (value < 0) {
return callback(new Error("数值不能为负数"));
}
if (!(/^[-+]?\d+$/).test(value)) {
return callback(new Error("请输入正整数或0"));
}
if (value.length > 9) {
callback(new Error("数值长度不能超过9个字符"));
} else {
callback();
}
};
return {
ruleForm:{ // 先在data中定义el-form 中model绑定的值
pass:'',
num:'',
age:''
},
rules: { // 进行表单校验
/*
required 如果为true,表示该字段为必填
message 当不满足设置的规则时的提示信息
pattern 正则表达式,通过正则验证值
min 当值为字符串时,min表示字符串的最小长度,当值为数字时,min表示数字的最小值
max 当值为字符串时,max表示字符串的最大长度,当值为数字时,max表示数字的最大值
trigger 校验的触发方式,change(值改变) / blur (失去焦点)两种,
validator 如果配置型的校验规则不满足你的需求,你可以通过自定义函数来完成校验
validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))
*/
pass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
num: [
{validator:quYu, trigger: 'change' }
// validator自定义校验的规则
],
age: [
{ type: 'date', required: true, message: '年龄', trigger: 'blur' },
{ pattern: /^([0]|[1-9][0-9]*)$/, message: "请输入0或正整数", trigger: ['blur', 'change'] }
// pattern通过正则表达式验证值
],
}
}
},
};
表单校验的相关属性:
required 如果为true,表示该字段为必填
message 当不满足设置的规则时的提示信息
pattern 正则表达式,通过正则验证值
min 当值为字符串时,min表示字符串的最小长度,当值为数字时,min表示数字的最小值
max 当值为字符串时,max表示字符串的最大长度,当值为数字时,max表示数字的最大值
trigger 校验的触发方式,change(值改变) / blur (失去焦点)两种,
validator 如果配置型的校验规则不满足你的需求,你可以通过自定义函数来完成校验
validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))
更多推荐
所有评论(0)