多层表单验证

代码中的表单验证,很多时候都是需要多层级嵌套

	data(){
		aaa:'',
		formItem:{
		xm:'',
		ng:'',
		sf:'',
		}
	}

对于这种formItem 我们应该怎么验证呢?

  1. 在html中绑定的prop
prop="formItem.XM"
  1. 在验证规则中
ruleValidate:{
      'formItem.xm': [
            { required: true, message: '请输入专业', trigger: 'change' },
            { max: 30, message: '不能超过30个字' }
          ],
 }

如果验证中有select选择器并且可以多选应该怎么验证呢?

 'xxx':[     //加上 type:'array'
            {type:'array',required: true, message: '请选择',trigger:'change'},
          ],

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TS 多层级数组嵌套并且表单验证是一个常见的需求,在 TypeScript 中可以通过使用类型注解和条件语句来实现。 在多层级数组嵌套的情况下,我们可以定义一个嵌套的接口类型来表示数据结构。例如,假设我们有一个表单,其中包含多个用户的信息,而每个用户又包含多个地址。可以定义一个嵌套的接口类型来表示这个数据结构: ```ts interface User { name: string; addresses: Address[]; } interface Address { street: string; city: string; country: string; } ``` 接下来,在表单验证方面,我们可以通过定义一个验证函数来验证表单的输入。例如,我们可以编写一个验证函数,该函数接收一个用户对象作为参数,并检查用户的名称和地址是否符合特定的规则: ```ts function validateUser(user: User): boolean { if (user.name.trim() === "") { console.error("用户名不能为空"); return false; } for (let address of user.addresses) { if (address.street.trim() === "" || address.city.trim() === "" || address.country.trim() === "") { console.error("地址信息不能为空"); return false; } } // 验证通过 return true; } ``` 这样,我们就可以使用这个验证函数来验证用户输入的数据了。例如,假设我们有一个用户表单如下: ```ts const userForm: User = { name: "John", addresses: [ { street: "123 Main St", city: "City", country: "Country" }, { street: "456 Second St", city: "", country: "Country" } ] }; // 验证用户表单 validateUser(userForm); ``` 以上就是使用 TypeScript 实现多层级数组嵌套并进行表单验证的一个示例。通过定义嵌套的接口类型和验证函数,可以更好地控制表单输入的规范性和准确性,从而提高代码的可靠性和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值