el-input设置必填提示(单个&多个)
有两种:一种是多个el-input通过同一个el-form表单来限制,这种用得最多的地方就是添加和修改功能;另一种是每个el-input通过各自的el-form表单来限制,这种通常是用在动态添加多个输入框等功能上,话不多说,上才艺噻.
(图片来源网络,侵删)
第一种(多个el-input同时限制):
举栗(element-ui官网的案例):
HTML代码:
- 立即创建 重置
JavaScript代码:
export default { data() { return { // 第一步,定义表单数据对象,并绑定 ruleForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, // 第二步,定义表单数据校验对象,并绑定 rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], date1: [ { type: 'date', required: true, message: '请选择日期', trigger: 'change' } ], date2: [ { type: 'date', required: true, message: '请选择时间', trigger: 'change' } ], type: [ { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } ], resource: [ { required: true, message: '请选择活动资源', trigger: 'change' } ], desc: [ { required: true, message: '请填写活动形式', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { // 第三步,点击提交表单按钮的时候判断是否符合校验规则,符合才会往下运行,不符合会 // 按照你定义的校验规则提示警告 this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }
第二种(对单个el-input设置必填限制):
(图片来源网络,侵删)
我是自己封装的组件,暂时没想到其他的方式,目前看来是能符合功能需求的。
1.定义组件input-required.vue
html代码:
javascript代码:
export default { data() { return { value: "", form: {}, formRules: {} }; }, // 子组件使用props来接收父组件内传过来的数据 props: ["propValue", "labelValue", "isDisalbed", "indexValue"], created() { // 给子组件的对象动态添加属性并设置属性值 this.$set(this.form, this.propValue, ""); this.$set(this.formRules, this.propValue, [ { required: true, message: `${this.labelValue}不能为空`, trigger: "blur" } ]); }, methods: { // el-input失去焦点后会校验数据,空的话会提示,符合校验规则会触发父组件内方法更新视图数据 isValid() { // 把el-input输入框中的值赋给form对象,方便下一步向父组件传递 this.form[this.propValue] = this.value; this.$refs["formRef"].validate(valid => { if (valid) { this.$emit("updateData", this.form, this.indexValue); } }); } } };
2.在要用到的地方引入使用组件
(图片来源网络,侵删)
// 1.引入组件路径 import InputRequired from "./components/input-required.vue"; // 2.注册组件 components: { InputRequired }, // 3.使用组件 里面的disabled等属性按照自己需求添加就行,但是注意需要使用冒号 : 动态绑定数据 // (1)这里的propValue是自定义组件里prop要绑定的属性,以及form中的属性; // (2)labelValue是自定义组件中label的值; // (3)isDisalbed是决定自定义组件中disabled是否启用; // (4)updateData方法用处是子组件内校验成功后触发父组件更新数据;
成功(*^▽^*)!
----------------------------------------------------手动分割线------------------------------------------
今天下午写着写着突然想到,需求好像又不完全像上面的第二种一样,再更新一下吧,而且个人用着感觉这一版可能判断更精准一点.
需求是点击确认按钮,会判断参数值是否都填写了,但凡有一个没填写都会提示需要填写完整;只有所有的都填写完整才会继续往下运行.
自定义组件内方法作如下修改:
isValid() { let flag = null; this.form[this.propValue] = this.value; this.$refs["formRef"].validate(valid => { if (valid) { flag = true; this.$emit("updateData", this.form, this.indexValue); } else { flag = false; } }); // 把每次校验的结果返回给父组件 return flag; }
父组件内判断是否全部填写完毕:
// 确认配置完成,生成模型配置信息 submit() { let flag = true; // flag并上每一行校验的结果,如果全部填写,最后就是true,但凡有一行没有填写,flag都会是false for (let index = 0; index
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...