vue组件库vant中form校验规则的使用

使用Field的rules属性定义校验规则

基础用法

# 方式一 在Field中直接加入
# ref 让后面
<van-form ref="form">    
<van-field :rules="[{ required: true, message: '请填写用户名' }]" />
</van-form>

# 方式二 在field中绑定一个rules 并在data中写入规则

<van-form >    
<van-field :rules='rules.phone' />
</van-form>

# 写入规则 

<script>
export default {
  data () {
    return {
      rules: {
        // 如:手机号校验规则
        phone: [{ required: true, message: '请输入手机号', trigger: 'onChange' },] 
<script>

required为true 表示必选字段

message 提示

trigger触发条件:1. onChange 改变 2. onBlur 失去焦点

validator 自定义函数校验规则

<script>
export default {
  data () {
    return {
      rules: {
        // 如:手机号校验规则
        phone: [
                { required: true, message: '请输入手机号', trigger: 'onChange' },
                {  {
            //自定义函数校验validator
            validator: value => {
              return /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9])) 
              [0-9]{8}$/.test(
                value
              )
            },
            message: '请输入正确手机号',
            trigger: 'onChange'
          }}
              ] 
<script>
© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发