antdesign of vue表单校验规则：只能包含中文、英文字母、数字和下划线，且不能以数字和下划线开头

开发框架

vue + antd of vue

问题描述

表单校验：只能包含中文、英文字母、数字和下划线，且不能以数字和下划线开头

正则校验

  const checkPlanName = (rule, value, callback) => {
    const patten = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/
    const limit = /^(?!_)(?![0-9])/
    if (!patten.test(value)) return callback(new Error('只能包含中文、英文字母、数字和下划线'))
    if (!limit.test(value)) return callback(new Error('不能以数字或者下划线开头'))
    callback()
  } 

完成代码

<template>
  <a-form-model
    ref="schemeForm"
    class="schemeForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item
      ref="planName"
      label="质检方案名称"
      prop="planName"
    >
      <a-input
        v-model="form.planName"
        placeholder="请输入质检方案名称"
      />
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
    data () {
    const checkPlanName = (rule, value, callback) => {
      const patten = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/
      const limit = /^(?!_)(?![0-9])/
      if (!patten.test(value)) return callback(new Error('只能包含中文、英文字母、数字和下划线'))
      if (!limit.test(value)) return callback(new Error('不能以数字或者下划线开头'))
      callback()
    }
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      form: {
        planName: '',
      },
      rules: {
        planName: [
          {
            required: true,
            message: '请输入质检方案名称',
            trigger: 'blur'
          },
          { min: 0, max: 15, message: '支持的长度为1-15字符', trigger: 'blur' },
          // 自定义校验
          { validator: checkPlanName, trigger: 'blur' }
        ]
      }
    }
}
</script>