表单校验

基于 async-validator 的表单验证，规则文档请查阅 https://github.com/yiminghe/async-validator (opens new window)

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

Form Props

参数	说明	类型	可选值	默认值
model	表单数据对象	object
rules	表单验证规则	object
border	是否带边框	boolean		false
disabled	是否禁用	boolean		false
show-message	是否显示校验错误信息	boolean		true
show-toast	是否显示消息提示	boolean		false
label-width	表单域标签的宽度	string		150rpx
lael-position	表单域标签的位置	string	right / left / top	right

Form Methods

事件名称	说明	参数
setRules	设置规则	Function(rules)
validate	对整个表单进行校验的方法	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: string / array, callback: Function(errorMessage))
resetFields	对整个表单进行重置
clearValidate	移除表单项的校验结果	Function(props: string / array)

Form-item Props

参数	说明	类型	可选值	默认值
prop	表单字段名	string
label	表单域标签	string
label-width	表单域标签的宽度	string		150rpx
show-message	是否显示校验错误信息	boolean		true
justify	水平排序	string	start	end
validate-on-value-change	值改变时是否触发验证	boolean		false

WARNING

如果 rules 带有自定义验证方法 validator, 请改用 setRules 的方式设置规则（在初始化中设置即可）

示例

<template>
	<view>
		<cl-form ref="form" :model.sync="form" :rules="rules" label-width="120rpx">
			<cl-form-item prop="name" label="活动名称">
				<cl-input v-model="form.name"></cl-input>
			</cl-form-item>
		</cl-form>

		<cl-button type="success" @tap="onSubmit">提交</cl-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: [
					{
						required: true,
						message: "活动名称不能为空"
					}
				],
				form: {
					name: ""
				}
			};
		},

		methods: {
			onSubmit() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						console.log("success");
					}
				});
			}
		}
	};
</script>