el-form正则特殊字符校验

el-form中可以使用正则表达式进行特殊字符校验。具体实现方法是在el-form-item中使用prop属性指定需要校验的字段，在rules属性中定义校验规则，其中validator属性可以使用正则表达式进行校验。

例如，需要校验一个输入框中是否包含特殊字符，可以在el-form-item中定义如下规则：

<el-form-item label="输入框" prop="input">
  <el-input v-model="inputValue"></el-input>
</el-form-item>

...

data() {
  return {
    inputValue: ''
  }
},
rules: {
  input: [
    { 
      validator: (rule, value, callback) => {
        const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/
        if (!reg.test(value)) {
          callback(new Error('输入框中不能包含特殊字符'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

相关问题

el-form添加正则表达式校验

在 Element UI 的 el-form 中添加正则表达式校验可以通过使用 el-form-item 的 prop 属性与 rules 属性来实现。具体步骤如下：

1. 首先，在 el-form-item 中设置 prop 属性，该属性的值应该与表单数据对象中的属性名称相同。例如，如果表单数据对象中包含一个名为“email”的属性，则应将 el-form-item 的 prop 属性设置为“email”。

2. 接下来，在 el-form-item 中设置 rules 属性，该属性应该是一个数组，数组中的每个元素都是一个对象，该对象包含校验规则的相关信息，例如正则表达式、错误提示信息等。例如，要对 email 字段进行校验，可以设置如下的 rules 属性：

<el-form-item label="Email" prop="email">
  <el-input v-model="formData.email"></el-input>
  <el-form-item v-show="formErrors.email" class="error">{{ formErrors.email }}</el-form-item>
  <template slot="append">@example.com</template>
  <template v-slot:prepend>
    <i class="el-icon-message"></i>
  </template>
  <template v-slot:label>
    <span>Email</span>
    <el-tooltip class="item" effect="dark" content="请输入正确的邮箱地址" placement="top">
      <i class="el-icon-info"></i>
    </el-tooltip>
  </template>
  <template slot="error" slot-scope="{ msg }">
    <span class="el-form-item__error">{{ msg }}</span>
  </template>
  <template v-slot:extra>
    <div class="el-form-item__extra">请输入您的常用邮箱，我们会向该邮箱发送激活邮件。</div>
  </template>
  <template slot="footer">
    <el-button type="primary" @click="handleSubmit('form')">立即注册</el-button>
    <el-button>取消</el-button>
  </template>
</el-form-item>

3. 在 rules 数组中，可以使用 validator 属性来设置校验函数，该函数接收三个参数：rule、value 和 callback。其中，rule 表示当前校验规则的相关信息，value 表示当前表单项的值，callback 是一个回调函数，它可以接收一个字符串作为参数，表示校验失败时的错误提示信息。例如，要对 email 字段进行校验，可以使用如下的 validator 函数：

<el-form-item label="Email" prop="email" :rules="[
  { required: true, message: '请输入您的邮箱地址' },
  { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱地址', trigger: 'blur' }
]">
  <el-input v-model="formData.email"></el-input>
</el-form-item>

这里通过 pattern 属性来设置正则表达式，message 属性来设置错误提示信息，并通过 trigger 属性来设置触发校验的时机。如果校验失败，就会自动显示错误提示信息。

el-form 给字段加正则校验

可以使用 el-form 表单组件中的 rules 属性来给字段加正则校验。具体步骤如下：

1. 给 el-form 中的每个需要校验的字段加上 prop 属性，用来标识该字段的唯一性。

2. 在 el-form 的 rules 属性中定义校验规则，格式为一个数组，数组中每个元素对应一个字段的校验规则。每个元素是一个对象，包含 validator 和 trigger 两个属性。

validator 是一个函数，用来对字段进行校验。函数的参数是字段的值和一个回调函数，回调函数的参数是一个布尔值，表示校验结果是否通过。

trigger 是一个字符串，表示校验触发的时机，包括 blur（失焦时触发）、change（值变化时触发）和其他自定义事件。

例如，对一个用户名字段进行非空和正则校验，可以这样定义规则：

   rules: {
     username: [
       { required: true, message: '用户名不能为空', trigger: 'blur' },
       { pattern: /^[a-zA-Z]\w{5,15}$/, message: '用户名必须以字母开头，长度在6-16之间，只能包含字母、数字和下划线', trigger: 'blur' }
     ]
   }

3. 在 el-form-item 组件中使用 prop 属性指定需要校验的字段名，并且设置 :rules 属性为表单规则中对应的数组，例如：

   <el-form-item label="用户名" prop="username">
     <el-input v-model="username"></el-input>
   </el-form-item>

这样就完成了 el-form 中字段的正则校验配置。