<template>
<div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<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="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age" @keyup.native="InputNumber('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>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
mounted() {},
methods: {
InputNumber(property) {
this.ruleForm[property] = this.limitInputPointNumber(this.ruleForm[property]);
},
limitInputPointNumber(val) {
if (val === 0 || val === '0' || val === '') {
return '';
} else {
return String(val).replace(/\D/g, '')
}
return val;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
InputNumber(property) {
this.ruleForm[property] = this.limitInputPointNumber(this.ruleForm[property]);
},
limitInputPointNumber(val) {
if (val === 0 || val === '0' || val === '') {
return '';
} else {
return String(val).replace(/\D/g, '')
}
return val;
},
验
Input Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 类型 | string | text,textarea 和其他 原生 input 的 type 值 | text |
value / v-model | 绑定值 | string / number | — | — |
maxlength | 原生属性,最大输入长度 | number | — | — |
minlength | 原生属性,最小输入长度 | number | — | — |
show-word-limit | 是否显示输入字数统计,只在 type = "text" 或 type = "textarea" 时有效 | boolean | — | false |
placeholder | 输入框占位文本 | string | — | — |
clearable | 是否可清空 | boolean | — | false |
show-password | 是否显示切换密码图标 | boolean | — | false |
disabled | 禁用 | boolean | — | false |
size | 输入框尺寸,只在 type!="textarea" 时有效 | string | medium / small / mini | — |
prefix-icon | 输入框头部图标 | string | — | — |
suffix-icon | 输入框尾部图标 | string | — | — |
rows | 输入框行数,只对 type="textarea" 有效 | number | — | 2 |
autosize | 自适应内容高度,只对 type="textarea" 有效,可传入对象,如,{ minRows: 2, maxRows: 6 } | boolean / object | — | false |
autocomplete | 原生属性,自动补全 | string | on, off | off |
auto-complete | 下个主版本弃用 | string | on, off | off |
name | 原生属性 | string | — | — |
readonly | 原生属性,是否只读 | boolean | — | false |
max | 原生属性,设置最大值 | — | — | — |
min | 原生属性,设置最小值 | — | — | — |
step | 原生属性,设置输入字段的合法数字间隔 | — | — | — |
resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
autofocus | 原生属性,自动获取焦点 | boolean | true, false | false |
form | 原生属性 | string | — | — |
label | 输入框关联的label文字 | string | — | — |
tabindex | 输入框的tabindex | string | - | - |
validate-event | 输入时是否触发表单的校验 | boolean | - | true |