vue el-form表单校验以及常用正则

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="表单字段" prop="str">
    <el-input v-model="ruleForm.str"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      const checkFinanceCode = (rule, value, callback) => {
        if (value) {
          var reg = /^[A-Za-z0-9_]+$/
          if (reg.test(value) === false) {
            callback(new Error('只可输入英文数字和下划线'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      return {
        ruleForm: {
          str: '',
        },
        rules: {
          str: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }, // 限制必填
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, // 限制字符串长度
            { required: true, trigger: 'blur', validator: checkFinanceCode } // 自定义正则
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

下面记录一下常用正则，大家发现错误，或者有更好的评论区提出来，我一并添加修改，方便大家下次直接用

// 数字类型
数字：/^[0-9]*$/
n位的数字：/^\d{n}$/
至少n位的数字：/^\d{n,}$/
m-n位的数字：/^\d{m,n}$/
价格：/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
零和非零开头的数字：/^(0|[1-9][0-9]*)$/
非零开头的最多带两位小数的数字：/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/
带1-2位小数的正数或负数：/^(\-)?\d+(\.\d{1,2})$/
正数、负数、和小数：/^(\-|\+)?\d+(\.\d+)?$/
有两位小数的正实数：/^[0-9]+(\.[0-9]{2})?$/
有1~3位小数的正实数：/^[0-9]+(\.[0-9]{1,3})?$/
非零的正整数：/^[1-9]\d*$/ 或 /^([1-9][0-9]*){1,3}$/ 或 /^\+?[1-9][0-9]*$/
非零的负整数：/^\-[1-9][]0-9"*$/ 或 /^-[1-9]\d*$/
非负整数：/^\d+$/ 或 /^[1-9]\d*|0$/
非正整数：/^-[1-9]\d*|0$/ 或 /^((-\d+)|(0+))$/
非负浮点数：/^\d+(\.\d+)?$/ 或 /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$/
非正浮点数：/^((-\d+(\.\d+)?)|(0+(\.0+)?))$/ 或 /^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$/
正浮点数：/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/ 或 /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/
负浮点数：/^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$/ 或 /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
浮点数：/^(-?\d+)(\.\d+)?$/ 或 /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/
// 其他特殊校验
4~20位英文+数字: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
大写英文: /^[A-Z]+$/
邮箱: /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+)$/ 或 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
手机: /^1[3456789]\d{9}$/ 或 /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
只能汉字: /^[\u4e00-\u9fa5]{0,}$/
电话号码: ("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：/^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$/
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/
强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/