uniapp + uviewui —— 表单正则校验

页面加载时设置rules,表单u–form标签中不写:rules = rules

生命周期onReady()

举例密码

<template>
	<u--form :model="form" ref="uForm">
		<u-form-item prop="password" borderBottom label="密码">
          <u-input
            v-model="form.password"
            placeholder="6~20位两位字符以上组合"
            border="none"
            clearable />
	</u--form>
</template>
data(){
	return {
		form: {
			password: ''
		}
		rules: {
	        password: [
	          {
	            required: true,
	            message: '请填写密码',
	            trigger: ['blur', 'change']
	          },
	          {
	            validator: (rule, value, callback) => {
	              return RegExp(
	                /^(?![\d]+$)(?![a-zA-Z]+$)(?![-=+_.,]+$)[\da-zA-Z-=+_.,]{6,20}$/
	              ).test(value)
	            },
	            message: '6~18位两位字符以上组合',
	            trigger: ['change', 'blur']
	          }
	        ]
      }
	}
},
onReady() {
  this.$refs['uForm'].setRules(this.rules)
 },

单独校验表单其中一个元素时

testPassWord() {
	this.$refs['uForm'].validateField(['password'], async (valid) => {
		// 操作
	}
}

你可能感兴趣的:(插件及UI框架开发问题解决,小程序,uni-app,微信小程序,前端)