表单的书写方法

$form=$this->beginWidget('CActiveForm', array(
        'id'=>'contact-form',
        'enableAjaxValidation'=>true, //是否启用ajax验证
        'enableClientValidation'=>true, //是否启用客户端验证
        'clientOptions' => array(
                'validateOnSubmit'=>true, //提交时验证
                'validateOnChange'=>true, //输入框值改变时验证
               'validateOnType'=>false,   //键入时验证
        ),       
 'htmlOptions' => array('enctype'=>'multipart/form-data'),
)
);

在 Avue 中书写表单,一般需要以下几个步骤: 1. 引入 Avue 组件库和样式文件 ```javascript import Avue from 'avue'; import 'avue/lib/theme-chalk/index.css'; ``` 2. 定义表单数据对象 ```javascript data() { return { formData: { name: '', age: '', gender: '', hobbies: [], description: '' } }; }, ``` 3. 在模板中使用 Avue 的 `avue-form` 组件,并设置相应的属性 ```html <template> <avue-form :model="formData" :rules="formRules" :inline="false" :label-width="100" :status-icon="true" :show-message="true" :disabled="false" :hidden="false" :submit="handleSubmit" :reset="handleReset" > <!-- 表单项 --> </avue-form> </template> ``` 4. 在 `avue-form` 组件中书写表单项,如 `avue-input`、`avue-select` 等 ```html <avue-form-item prop="name" label="姓名"> <avue-input v-model="formData.name" placeholder="请输入姓名"></avue-input> </avue-form-item> <avue-form-item prop="age" label="年龄"> <avue-input v-model="formData.age" placeholder="请输入年龄"></avue-input> </avue-form-item> <avue-form-item prop="gender" label="性别"> <avue-select v-model="formData.gender" placeholder="请选择性别"> <avue-option value="male">男</avue-option> <avue-option value="female">女</avue-option> </avue-select> </avue-form-item> <avue-form-item prop="hobbies" label="爱好"> <avue-checkbox-group v-model="formData.hobbies"> <avue-checkbox label="music">音乐</avue-checkbox> <avue-checkbox label="sport">运动</avue-checkbox> <avue-checkbox label="reading">阅读</avue-checkbox> </avue-checkbox-group> </avue-form-item> <avue-form-item prop="description" label="个人描述"> <avue-textarea v-model="formData.description" placeholder="请输入个人描述"></avue-textarea> </avue-form-item> ``` 5. 定义表单验证规则 ```javascript data() { return { formRules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值', trigger: 'blur' } ], gender: [ { required: true, message: '请选择性别', trigger: 'change' } ], hobbies: [ { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' } ], description: [ { required: true, message: '请输入个人描述', trigger: 'blur' }, { min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' } ] } }; }, ``` 6. 定义表单提交和重置的方法 ```javascript methods: { handleSubmit() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过 console.log(this.formData); } else { // 表单验证失败 console.log('验证失败'); } }); }, handleReset() { this.$refs.form.resetFields(); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值