form表单相关

# form表单相关

# form属性

1. label-width：表单域标签的宽度（label宽度），默认auto,可设置none(没有label)、xxpx
2. hide-required-asterisk: 隐藏必填字段的红色星号
3. show-type: 值为detail,所有的表单元素都是禁用
4. rules: 验证规则
   • data中定义规则

   rules: {
                name: [
                    { required: true, message: '请输入活动名称',trigger: 'blur'},
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                area: [
                    { required: true, message: '请选择活动区域', trigger: 'change'}
                ],
                area1: [
                    { required: true,type:"array", message: '请选择活动区域', trigger: 'change'}
                ],
                type: [
                    { type: 'array',required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                mail:[
                    { type:'email',required: true, message: '请填写邮箱', trigger: 'blur' }
                ],
                pass:[
                    { required: true, validator: (rule, value, callback)=>{
                        if (value === '') {
                            callback(new Error('请输入密码'));
                        } else {
                            if (this.data.form.checkPass !== '') {
                                this.find('#aui-form').validateField('checkPass');
                            }
                            callback();
                        }
                    }, trigger: 'blur' }
                ],
                checkPass: [
                    { required: true, validator:(rule, value, callback)=>{
                        if (value === '') {
                            callback(new Error('请再次输入密码'));
                        } else if (value !== this.data.form.pass) {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    }, trigger: 'blur' }
                ],
            },
   
   • 模板上使用（aui-form上v-data:rules="rules"，aui-form-item的子元素上prop="checkPass"

   <aui-form label-width="220px" class="main-body" v-data:rules="rules" hide-required-asterisk>
        <aui-form-item v-bind:label="lang.mosSystem.domianUrl">
            <aui-input  class="inputWidth"  v-model:text="pass"  prop="pass" placeholder="https://example.com:port"></aui-input>
        </aui-form-item>
        <aui-form-item v-bind:label="lang.mosSystem.domianUrl">
            <aui-input  class="inputWidth"  v-model:text="checkPass"  prop="checkPass" placeholder="https://example.com:port"></aui-input>
        </aui-form-item>
        <aui-form-item form-handler>
            <aui-button v-on:click="save">{{lang.mosSystem.save}}</aui-button>
        </aui-form-item>
    </aui-form>
   
   • 方法中使用

   // 保存时进行校验
   save(){
         this.find("aui-form").validate((valid)=>{
            if(valid){
                // doSomething
            }
        })
    },
   

   // 触发对应validator的回调函数
   this.find('aui-form').validateField('checkPass');