Ant-Design-Vue中关于Form组件的使用 - 菜小牛 - 博客园

[xiaodongxier]

1.创建form表单的两种方式，不同的方式在js中创建表单的方式也不同

---

方式1：一般使用在搜索表单中，只需要双向绑定数据即可，那就使用这种方法即可

Submit <script> export default { name: 'TestForm', data () { return { queryParam:{ note:'', mark:'' } } }, methods: { handleSubmit () { console.log(this.queryParam) } } } </script>

方式2：在登录，或者注册等等应用场景中使用，需要对表单进行校验等等操作，请使用这种方法

 如果只有图，那我还怎么写代码？怎么复制粘贴？怎么工作？

--> Submit <script> export default { name: 'TestForm', data () { return { // 这里是用createForm创建表单，传入this即可 form: this.$form.createForm(this), // 后面这个参数是options配置项(可选参数)，为啥要设置他，见后面说明 //form: this.$form.createForm(this, { name: 'loginForm' }), ValidateRules: { note: { rules: \[{ required: true, message: 'Please input your note!' }\] } } } }, methods: { handleSubmit (e) { const aa = document.getElementById('note') console.log(aa.value) e.preventDefault() this.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values) } }) console.log(this.form.getFieldsValue()) } } } </script>

2.在使用createForm()创建表单的时候，传入options.name的原因：

图片太小，请在图片上点击右键，选择在新标签页中打开即可。

 如果按照上面所写，你定义两个表单，都有个属性值叫做gender的话，那他们的id也是相同的，都是 id="gender"，按照原则来说，一个页面不应该有相同的id。可能会导致如下：

const genderDiv = document.getElementById('gender');　　// 你在这里获取id为gender的标签也会引起歧义，如果当前页面只有一个form表单，或者多个表单没有重复字段，不设置name并无影响
console.log(genderDiv.value);　　// 你只能打印出来一个表单中的gender的值，另一个表单的值你获取不到了，因为id设置重复了，覆盖了

3.动态校验规则：

Nickname is required Check <script> const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 8 }, }; const formTailLayout = { labelCol: { span: 4 }, wrapperCol: { span: 8, offset: 4 }, }; export default { data() { return { checkNick: false, // 双向绑定的checkbox的状态 formItemLayout, // 表单的label布局和wrapper-col布局 formTailLayout, form: this.$form.createForm(this), // 创建表单 ValidateRules:{ // 表单校验方法，其中nickname的表单校验规则，由this.checkNick属性决定 username:{rules: \[{ required: true, message: 'Please input your nickname' }\]}, nickname:{rules: \[{ required: this.checkNick, message: 'Please input your nickname' }\]}} }; }, methods: { check() { this.form.validateFields(err => { if (!err) { console.info('success'); } }); }, handleChange(e) { //checkbox绑定的change方法，传入的值为checkbox的状态true或者false this.checkNick = e.target.checked; // 修改checkNick的值，相当于改变nickname的校验规则 this.$nextTick(() => { // 注意要放入nextTick函数中去 this.form.validateFields(\['nickname'\], { force: true }); // 启动校验规则，force为强制校验 }); }, }, }; </script>

 4.自行处理表单数据

补充：validate-status是form-item的属性中的校验状态属性，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating

help也是form-item中的属性，相当于错误提示，跟validate-status搭配使用

 

<script> function validatePrimeNumber(number) { if (number === 11) { return {validateStatus: 'success',errorMsg: null,}; } return { validateStatus: 'error',errorMsg: 'The prime between 8 and 12 is 11!',}; } export default { data() { return { labelCol: { span: 7 }, wrapperCol: { span: 12 }, number: {value: 11,}, tips:'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.', }; }, methods: { handleNumberChange(value) { this.number = { ...validatePrimeNumber(value), value, }; }, }, }; </script>

View Code