vue+element-ui自定义正则验证

2020-04-23  本文已影响0人  who_are_you_

已邮箱验证为例:

<template>
        <div>
                <el-form  ref='form' :rules="rules" :model="form" >
                          <el-input v-model='form.email' placeholder='请输入邮箱'></el-input>
                </el-from>
        </div>
</template>
<script>
export default {
          data() {
                // 在这里写正则表达式验证
                let isEmail = (rule, value, callback) => {
                      if (value.length > 0) {
                            const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/i;
                             return reg.test(value) ? callback() : callback(new Error(`${value}邮箱格式不合法`));
                      } else {
                             return callback(new Error(`请输入邮箱`));
                      }
                }
                return {
                        form: {
                                email: ''
                        },
                        // 验证规则
                        rules: {
                              namelist: [
                                      { validator: isemail, trigger: ['blur', 'change'] }
                               ]
                        }
                };
          }
}
<script>
<style>
<style>
上一篇下一篇

猜你喜欢

热点阅读