挂机宝做网站可以吗,网站建设使用的什么,如何制作网站教程视频,购物网站开发的基本介绍此组件一般用于表单场景#xff0c;可以配置Input输入框#xff0c;Select弹出框#xff0c;进行表单验证等。 注意#xff1a;
由于在nvue下#xff0c;u-form名称被uni-app官方占用#xff0c;在nvue页面中请使用u--form名称#xff0c;在vue页面中使用u--form或者u-…此组件一般用于表单场景可以配置Input输入框Select弹出框进行表单验证等。 注意
由于在nvue下u-form名称被uni-app官方占用在nvue页面中请使用u--form名称在vue页面中使用u--form或者u-form均可。
注意
需要兼容微信小程序并且校验规则中含有方法等只能通过setRules方法设置规则。 如。
onReady() {//onReady 为uni-app支持的生命周期之一this.$refs.uForm.setRules(this.rules)
},copy
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
此组件一般是用于表单验证使用每一个表单域由一个u-form-item组成表单域中可以放置u-input、u-checkbox、u-radio、u-switch等。
在表单组中通过model参数绑定一个对象这个对象的属性为各个u-form-item内组件的对应变量。由于表单验证和绑定表单规则时需要通过ref操作故这里需要给form组件声明refuForm属性。关于u-from-item内其他可能包含的诸如input、radio等组件请见各自组件的相关文档说明。
templateview!-- 注意如果需要兼容微信小程序最好通过setRules方法设置rules规则 --u--formlabelPositionleft:modelmodel1:rulesrulesrefuFormu-form-itemlabel姓名propuserInfo.nameborderBottomrefitem1u--inputv-modelmodel1.userInfo.namebordernone/u--input/u-form-itemu-form-itemlabel性别propuserInfo.sexborderBottomclickshowSex true; hideKeyboard()refitem1u--inputv-modelmodel1.userInfo.sexdisableddisabledColor#ffffffplaceholder请选择性别bordernone/u--inputu-iconslotrightnamearrow-right/u-icon/u-form-item/u--formu-action-sheet:showshowSex:actionsactionstitle请选择性别description如果选择保密会报错closeshowSex falseselectsexSelect/u-action-sheet/view
/templatescript
export default {data() {return {showSex: false,model1: {userInfo: {name: uView UI,sex: ,},},actions: [{name: 男,},{name: 女,},{name: 保密,},],rules: {userInfo.name: {type: string,required: true,message: 请填写姓名,trigger: [blur, change]},userInfo.sex: {type: string,max: 1,required: true,message: 请选择男或女,trigger: [blur, change]},},radio: ,switchVal: false};},methods: {sexSelect(e) {this.model1.userInfo.sex e.namethis.$refs.uForm.validateField(userInfo.sex)},},onReady() {//如果需要兼容微信小程序并且校验规则中含有方法等只能通过setRules方法设置规则。this.$refs.uForm.setRules(this.rules)},
};
/scriptcopy
从上面的示例我们可以看到rules中的属性名和form的属性名是一致的同时传递给u-form-item的prop参数绑定的也是相同的属性名注意这里prop参数绑定的是 字符串(属性名)而不是一个变量。
#Form-item组件说明
此组件一般需要搭配Form组件使用也可以单独搭配Input等组件使用由于此组件参数较多这里只对其中参数最简要介绍其余请见底部的API说明
prop为传入Form组件的model中的属性字段如果需要表单验证此属性是必填的。labelPosition可以配置左侧label的对齐方式可选为left和top。borderBottom是否显示表单域的下划线如果给Input组件配置了边框可以将此属性设置为false从而隐藏默认的下划线。如果想在表单域配置左右的图标或小图片可以通过leftIcon和rightIcon参数实现。
#验证规则
组件验证部分采用了async-validator (opens new window)一个字段可以设置多个内置规则以及自定义规则触发方式等 每个字段的验证规则为一个数组数组的每一个元素对象为其中一条规则(一个字段的验证可以配置多个规则)如下
rules: {userInfo.name: {type: string,required: true,message: 请填写姓名,trigger: [blur, change]},code: {type: string,required: true,len: 4,message: 请填写4位验证码,trigger: [blur]},userInfo.sex: {type: string,max: 1,required: true,message: 请选择男或女,trigger: [blur, change]},radiovalue1: {type: string,min: 1,max: 2,message: 生命是美好的请不要放弃治疗,trigger: [change]},checkboxValue1: {type: array,min: 2,required: true,message: 不能太宅至少选两项,trigger: [change]},intro: {type: string,min: 3,required: true,message: 不低于3个字,trigger: [change]},hotel: {type: string,min: 2,required: true,message: 请选择住店时间,trigger: [change]},userInfo.birthday: {type: string,required: true,message: 请选择生日,trigger: [change]},
},copy
#验证规则属性
每一个验证规则中可以配置多个属性下面对常用的属性进行讲解更具体的可以查看async-validator (opens new window)的文档说明 trigger{String | Array}触发校验的方式有2种 change字段值发生变化时校验blur输入框失去焦点时触发如果同时监听两种方式需要写成数组形式[change, blur] type{String} 内置校验规则如这些规则无法满足需求可以使用正则匹配、或者使用validator自定义方法并结合uView自带验证规则。 string必须是 string 类型默认类型number必须是 number 类型boolean必须是 boolean 类型method必须是 function 类型regexp必须是 regexp 类型这里的正则指的是判断字段的内容是否一个正则表达式而不是用这个正则去匹配字段值integer必须是整数类型float必须是浮点数类型array必须是 array 类型object必须是 object 类型enum必须出现在 enmu 指定的值中date必须是 date 类型url必须是 url 类型hex必须是 16 进制类型email必须是 email 类型any任意类型 required 布尔值是否必填配置此参数不会显示输入框左边的必填星号如需要请配置u-form-item的required为true注意如需在swiper标签内显示星号需要给予swiper-item第一个根节点一定的margin样式 pattern 要求此参数值为一个正则表达式如 /\d/不能带引号如/\d/组件会对字段进行正则判断返回结果。 min 最小值如果字段类型为字符串和数组会取字符串长度与数组长度(length)与min比较如果字段是数值则直接与min比较。 max 最大值规则同min参数 len 指定长度规则同min优先级高于min和max enum{Array} 指定的值配合 type: enum 使用 whitespace{Boolean} 如果字段值内容都为空格默认无法通过required: true校验如果要允许通过需要将此参数设置为true transform{Function}校验前对值进行转换函数的参数为当前值返回值为改变后的值参数如如下 value当前校验字段的值 message 校验不通过时的提示信息 validator{Function}自定义同步校验函数参数如下 rule当前校验字段在 rules 中所对应的校验规则value当前校验字段的值callback校验完成时的回调一般无需执行callback返回true(校验通过)或者false(校验失败)即可 asyncValidator{Function}自定义异步校验函数参数如下 rule当前校验字段在 rules 中所对应的校验规则value当前校验字段的值callback校验完成时的回调执行完异步操作(比如向后端请求数据验证)如果不通过需要callback(new Error(提示错误信息))如果校验通过执行callback()即可
#uView自带验证规则
uView在JS板块的Test 规则校验中有大量内置的验证规则这些规则对表单验证来说属于自定义规则故需要用到上方规则属性的 validator自定义验证函数这里做一个详细说明。
我们知道uView有自带的判断手机号的验证方法uni.$u.test.mobile(value)但是async-validator (opens new window)没有 内置判断手机号的规则所以将二者结合使用
rules: {// 字段名称mobile: [{required: true, message: 请输入手机号,trigger: [change,blur],},{// 自定义验证函数见上说明validator: (rule, value, callback) {// 上面有说返回true表示校验通过返回false表示不通过// uni.$u.test.mobile()就是返回true或者false的return uni.$u.test.mobile(value);},message: 手机号码不正确,// 触发器可以同时用blur和changetrigger: [change,blur],}]
}copy
#综合实战
上面讲述了async-validator (opens new window)的规则和配置以及uView内置规则的结合使用下面我们进行一个综合 实战示例要入对某一个字段进行如下验证(验证实现有多种方法下方仅为引导示例非唯一或最优做法)
必填同时可接受change和blur触发校验配置required参数为true同时配置trigger为[change, blur]必须为字母或字符串校验前先将字段值转为字符串类型通过pattern参数配置正则/^[0-9a-zA-Z]*$/g通过transform参数在校验前对字段值转换为字符串长度6-8个字符之间通过 配置min为6max为8需要包含字母A使用uView的uni.$u.test.contains()方法并结合validator自定义函数实现异步校验输入完账号输入框失去焦点时向后端请求该账号是否已存在通过上方的asyncValidator异步函数进行验证。
综上我们可以得出如下的一个配置规则(仅为综合演示非最优做法)
rules: {name: [// 必填规则{required: true,message: 此为必填字段,// blur和change事件触发检验trigger: [blur, change],},// 正则判断为字母或数字{pattern: /^[0-9a-zA-Z]*$/g,// 正则检验前先将值转为字符串transform(value) {return String(value);},message: 只能包含字母或数字},// 6-8个字符之间的判断{min: 6,max: 8,message: 长度在6-8个字符之间},// 自定义规则判断是否包含字母A{validator: (rule, value, callback) {return uni.$u.test.contains(value, A);},message: 必须包含字母A},// 校验用户是否已存在{asyncValidator: (rule, value, callback) {uni.$u.http.post(/xxx/xxx, {name: value}).then(res {// 如果验证不通过需要在callback()抛出new Error(错误提示信息)if(res.error) {callback(new Error(姓名重复));} else {// 如果校验通过也要执行callback()回调callback();}})},// 如果是异步校验无需写message属性错误的信息通过Error抛出即可// message: xxx}]
}copy
#校验错误提示方式
uView提供了多种校验的错误提示方式传递给Form组件的errorType参数
message默认为输入框下方用文字进行提示none不会进行任何提示border-bottom配置作用域底部的下划线显示为红色要求给form-item设置了borderBottomtrue才有效toast以toast提示的方式弹出错误信息每次只弹出最前面的那个表单域的错误信息
templateu--form :errorTypeerrorType....../u--form
/templatescript
export default {data() {return {// 文字提示errorType: message,// 不提示// errorType: none,// 下划线提示要求给form-item设置了borderBottomtrue才有效// errorType: border-bottom};}
};
/scriptcopy
#校验
进行了上方的配置和讲解后进入到最后一步执行验证 需要通过ref调用Form组件的validate方法该方法回调函数的参数为一个布尔值true为校验通过否则反之。
templateview classu--form :modelform refuFormu-form-item label姓名 propnameu-input v-modelform.name //u-form-item/u--formu-button clicksubmit提交/u-button/view
/templatescript
export default {data() {return {form: {name: ,},rules: {name: [{required: true,message: 请输入姓名,trigger: [blur, change]}]}};},methods: {submit() {this.$refs.uForm.validate().then(res {uni.$u.toast(校验通过)}).catch(errors {uni.$u.toast(校验失败)})}},
};
/script
