精华内容
下载资源
问答
  • vue表单正则验证
    千次阅读
    2021-01-13 02:21:00

    首先需要自己写正则表达式,正则学得不好就不乱指点了=>

    方法

    1如果你是单独建的js文件 先引入正则表达式文件才进行下一步 或者直接在组件内写正则

    2data({

    const regExpID = (rule, value, callback) => { //regExpID自定义类名

    if (value === '') { //value 验证的值不要更改 会自动匹配你所需要验证的值 callback验证错误返回的提示可根据需求自行更改

    callback(new Error('生态id不能为空'));

    } else if (regExp.isText(value)) { //regExp.isText引入的文件的正则表达式 当然也可以直接引入文件内的某一个正则视情况而定

    callback(new Error(('生态id不能是文字')))

    } else {

    callback()

    }

    };

    }) ,

    return{

    rules: {

    //表单验证 validator是element官方提供验证方法 regExpID上面方法自定义明

    desc: [

    {required: true, validator: regExpID, trigger: 'blur'},

    ],

    }

    }

    这只是来自官方提供的方法 也可以请表单验证模块学习更深层次的验证

    大佬写的方法比这个透彻欢迎交流

    更多相关内容
  • {validator: 函数名 ,trigger: 'blur'} 这个和之前的函数定义不一样 ,但是data里面也可以定义函数 const samePwd = 一个函数 其实很值钱没什么区别 一般情况下 ,表单有两种校验的方式 第一种: 红框里面会存在正则的...

    在这里插入图片描述

    {validator:     函数名        ,trigger:   'blur'}
    

    这个和之前的函数定义不一样 ,但是data里面也可以定义函数
    const samePwd = 一个函数
    其实很值钱没什么区别

    一般情况下 ,表单有两种校验的方式
    第一种: 在这里插入图片描述
    红框里面会存在正则的校验 也就是每一个输入框都有自己的校验规则
    在这里插入图片描述

    第二种: 在大多数情况下 第一种已经可以 但是为了防止 部分用户转空子 会存在第二种校验的方式
    也就是再点击注册按钮的时候触发
    在这里插入图片描述
    这是ui组件库 自己已经封装好 的验证方法
    在这里插入图片描述

    展开全文
  • AntDesign - UI -vue 列表表单验证,多条数据验证,正则验证,正则提示

    vue antUI - 列表表单验证,

    一般的表单验证,需要提交的数据是是一个对象类似于下面的样子,
    formData:{
    	name: '',
    	age: '',
    	phone: ''
    }
    

    但是我们经常会碰到这样是数据结构,我们去验证下面图片的列表里每一个字段的填写状态时,之前的绑定porp的方式就不灵了,需要处理一下。

    其实官网上面是有类似的例子的 antUI表单提交ui

    很多人都没找到,我也是那天被产品逼着,弄出来的,一开始去百度的,查不到,后面就试着去看官网,一个一个的看,看到最后的时候,发现里面竟然有,稍微改造一下就弄好了,现在分享给大家。
    这是官网的截图
    在这里插入图片描述

    formData:{
    	name: '',
    	age: '',
    	phone: '',
    	familyList: [
    		{
    			name: '',
    			age: '',
    			phone: '',
    		}
    	]
    }
    
    这是我做的,点击提交会对每个填写porp的参数校验

    在这里插入图片描述具体代码。。。还是发出来把,其实你看看官网就知道了,但是估计会有写新手还是不会弄

    大概说一下

    a-form-item-model 标签循环之后,
    最重要的其实就是这一句 :prop="‘checkPointItemList.’ + index + ‘.relation’ "
    这是官网那边的写法,如果不知道这个,那要不知道费多少牛劲了,但是知道了后,也就那样,只是一个规定写法而已,没啥技术含量

    最后有人肯定想问, elementui可以这样写吗,我去官网看了一下,上面没有类似的例子,不清楚,如果可以欢迎告诉我,
    <template>
      <page-container :title="false">
        <a-spin :spinning="spinning" :delay="500">
          <div class="table-page-search-wrapper">
            <a-form-model
              ref="ruleForm"
              :rules="rules"
              :model="queryParam"
              layout="inline"
              :label-col="{ style: { width: '150px' } }">
              <a-card
                :bordered="false"
                style="margin: 0 15px"
                :bodyStyle="{ paddingTop: '30px',}">
                <a-row :gutter="24">
                  <a-col :lg="8" :md="12" :sm="12" :xs="24" >
                    <a-form-model-item prop="deptId" label="所属部门/车间">
                      <a-tree-select
                        v-model="queryParam.deptId"
                        allowClear
                        style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :tree-data="signOrgNameOptions"
                        placeholder="所属部门/车间"
                        @change="changeDeptIdFun"
                        allow-clear
                        tree-default-expand-all
                        :rules="{
                          required: true,
                          message: '不能为空',
                          trigger: 'change',
                        }"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :lg="8" :md="12" :sm="12" :xs="24" >
                    <a-form-model-item prop="timeLimit" label="检查时限">
                      <div style="margin-bottom: 16px">
                        <a-input
                          style="width:100%"
                          :max="99999"
                          precision="0"
                          type="number"
                          :rules="{
                            required: true,
                            message: '不能为空',
                            trigger: 'change',
                          }"
                          v-model="queryParam.timeLimit"
                          placeholder="请输入数字">
                          <a-select slot="addonAfter" v-model="queryParam.timeLimitUnit" default-value="MIN" style="width: 80px">
                            <a-select-option v-for="(item) in timeLimiList" :key="item.value" :value="item.value">
                              {{ item.name }}
                            </a-select-option>
                          </a-select>
                        </a-input>
                      </div>
                    </a-form-model-item>
                  </a-col>
                  <a-col :lg="8" :md="12" :sm="12" :xs="24" >
                    <a-form-model-item prop="checkLocation" label="检查点/位置">
                      <a-input
                        maxLength="50"
                        allowClear
                        :rules="{
                          required: true,
                          message: '不能为空',
                          trigger: 'change',
                        }"
                        v-model="queryParam.checkLocation"
                        placeholder="请输入"/>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24" type="flex" style="padding: 10px 0 20px 0">
                  <a-col flex="150px" style="padding-right:0">
                    <h4 style="text-align:right"> 检查内容与要求:</h4>
                  </a-col>
                  <a-col flex="1" style="padding-left:0">
                    <div class="tableMakeClass">
                      <a-table
                        bordered
                        :data-source="queryParam.checkPointItemList"
                        width="600px">
                        <a-table-column title="序号" data-index="index" align="center" width="70px" >
                          <template slot-scope="text,record, index">
                            {{ index + 1 }}
                          </template>
                        </a-table-column>
                        <a-table-column title="检查内容与要求" align="center" data-index="checkContent" >
                          <template slot-scope="text, record,index">
                            <a-form-model-item
                              :prop="'checkPointItemList.' + index + '.checkContent' "
                              :rules="{
                                required: true,
                                message: '不能为空',
                                trigger: 'blur',
                              }"
                            >
                              <a-input
                                style="margin: -5px 0"
                                maxLength="30"
                                allowClear
                                v-model="record.checkContent"
                              />
                            </a-form-model-item>
                          </template>
                        </a-table-column>
                        <a-table-column title="是否关联设备数据" align="center" data-index="relation" width="240px">
                          <template slot-scope="text, record, index">
                            <a-form-model-item
                              v-if="!detail"
                              :key="index"
                              :prop="'checkPointItemList.' + index + '.relation' "
                            >
                              <!-- 是否关联设备数据 true 关联 false不关联 -->
                              <a-radio-group name="radioGroup" v-model="record.relation" :default-value="true">
                                <a-radio :value="true">
                                  关联
                                </a-radio>
                                <a-radio :value="false">
                                  不关联
                                </a-radio>
                              </a-radio-group>
                            </a-form-model-item>
                            <span v-else>{{ text }}</span>
                          </template>
                        </a-table-column>
                        <a-table-column align="left" title="操作" width="150px" v-if="!detail">
                          <template slot-scope="text,record, index">
                            <a-button style="margin-left: 5px" icon="plus" @click="addContentRaw(queryParam.checkPointItemList, index)"></a-button>
                            <a-button icon="delete" @click="removeContentRaw(queryParam.checkPointItemList, index)"> </a-button>
                          </template>
                        </a-table-column>
                      </a-table>
                    </div>
                  </a-col>
                </a-row>
                <a-row :gutter="24" >
                  <a-col class="tableMakeClass" :lg="12" :md="12" :sm="12" :xs="24" >
                    <a-form-model-item
                      prop="checkList"
                      label="关联检查设备"
                      :rules="{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur',
                      }"
                    >
                      <a-select
                        mode="multiple"
                        allowClear
                        v-model="queryParam.checkList"
                        style="width: 100%"
                        placeholder="Please select"
                        @change="handleChange"
                      >
                        <a-select-option v-for="(item) in inspectDataList" :key="item.id" >
                          {{ item.equipName }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24" v-if="detail">
                  <a-col :lg="12" :md="12" :sm="12" :xs="24" >
                    <a-form-model-item label="创建人" >
                      <span>  {{ queryParam.createName }}</span>
                    </a-form-model-item>
                  </a-col>
                  <a-col :lg="12" :md="12" :sm="12" :xs="24" >
                    <a-form-model-item label="创建时间">
                      <span>  {{ queryParam.createTime }}</span>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24" >
                  <a-col class="itextarealass" :lg="12" :md="12" :sm="12" :xs="24">
                    <a-form-model-item prop="descs" label="备注">
    					<!--    这是我自己写的一个输入框组件,但是替换成你想要的 -->
                      <my-textarea
                        maxLength="50"
                        allowClear
                        v-model="queryParam.descs"
                        placeholder="备注"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-card>
              <a-card
                :bordered="false"
                style="margin: 15px"
                :bodyStyle="{ paddingTop: '15px' }">
                <div style="text-align: center;">
                  <a-space>
                    <a-button type="primary" @click="addFun">提交</a-button>
                    <a-button type="info" @click="clsoeFun">返回</a-button>
                  </a-space>
                </div >
              </a-card>
            </a-form-model>
          </div>
        </a-spin>
      </page-container>
    </template>
    <script>
    import { STable } from '@/components'
    import requestURLs from '@/api/smartInspection/inspectPoint'
    
    export default {
      name: 'CommitmentModelPerson',
      components: {
        STable,
      },
      data () {
        return {
          timeLimiList: [
            { name: '分钟', value: 'MIN' },
            { name: '小时', value: 'HOUR' },
            { name: '日', value: 'DAY' },
            { name: '周', value: 'WEEK' },
            { name: '月', value: 'MONTH' }
          ],
          signOrgNameOptions: [],
          inspectDataList: [],
          personSelectModalVisible: false,
          spinning: false,
          detail: false,
          queryParam: {
            checkLocation: '',
            checkPointCode: '',
            deptId: null,
            descs: '',
            id: null,
            timeLimit: null,
            timeLimitUnit: 'MIN',
            checkList: [],
            checkPointEquipList: [],
            checkPointItemList: [
              {
                checkContent: '',
                id: null,
                relation: true
              }
            ]
          },
          isDetail: '',
          usernameStr: '',
          userInfo: getStore({ name: 'info' }),
          rules: {
            timeLimit: [{ required: true, message: '请选择', trigger: 'change' }],
            deptId: [{ required: true, message: '请选择', trigger: 'change' }],
            checkLocation: [{ required: true, message: '不能为空', trigger: 'blur' }]
    
          }
        }
      },
      created () {
      },
      methods: {
        addFun () {
          this.$refs.ruleForm.validate(valid => {
            if (valid) {
                this.spinning = true
                requestURLs.add(this.queryParam).then((res) => {
                  if (res.success) {
                    this.spinning = false
                    this.$message.success('提交成功')
                    this.clsoeFun()
                  }
                })
            } else {
              console.log('error submit!!')
              return false
            }
          })
        },
        changeDeptIdFun() {
          requestURLs.listByDeptId(this.queryParam.deptId).then((res) => {
            if (res.success) {
              this.inspectDataList = res.data
              console.log(res)
            }
          })
        },
        // 编辑 资金计划:
        handleChange (value, key, column) {
          console.log(value, key, column, '======')
          // 是
        },
        // 添加
        addContentRaw (list, index) {
          list.push({
            name: '',
            key: Date.now()
          })
        },
        // 删除
        removeContentRaw (list, index) {
          if (list.length === 1) {
            this.$message.warning('至少保留一条内容!')
          } else {
            list.splice(index, 1)
          }
        },
      }
    }
    </script>
    <style lang="less" scoped>
      /deep/.imgsClass .ant-form-item-control {
        height: auto !important;
      }
      /deep/.ant-form-item-control {
        height: 44px;
        line-height: 44px;
      }
      /deep/.itextarealass .ant-form-item-control {
        // height: auto !important;
        height: 84px !important;
        line-height: 24px !important;
      }
    /deep/.tableMakeClass{
      padding: 0 10px;
    }
    /deep/.tableMakeClass .ant-table-pagination.ant-pagination{
      display: none;
    }
    /deep/.tableMakeClass .ant-form-item-control {
      height: 48px !important;
    }
    .tableMakeClass .ant-btn{
      width: 30px;
      height: 26px;
      padding: 0;
      border: none;
      color: #56a3f1;
    }
    .tableMakeClass .ant-btn:hover{
      background: #56a3f1;
      color: #fff;
    }
    /deep/.tableMakeClass .ant-table .ant-table-tbody tr td{
      padding: 0 30px;
    }
    /deep/.indexNexClass .ant-form-item-control-wrapper{
      margin-left: 150px;
    }
      /deep/.itextarealass .ant-form-item-control {
        // height: auto !important;
        height: 84px !important;
        line-height: 24px !important;
      }
    </style>
    
    

    就这些了,具体的用法,都再里

    展开全文
  • vue密码正则验证表单验证 介绍 (Introduction) Almost every web application makes use of forms in some way, as such developers always have to tackle form validations. If you are a new developer, it can ...

    vue密码正则验证表单验证

    介绍 (Introduction)

    Almost every web application makes use of forms in some way, as such developers always have to tackle form validations. If you are a new developer, it can be hard deciding how best to approach this. Depending on the stack you are using, there are many of options to choose from.

    几乎每个Web应用程序都以某种方式使用表单,因为此类开发人员始终必须处理表单验证。 如果您是新开发人员,可能很难决定如何最好地实现这一目标。 根据您使用的堆栈,有许多选项可供选择。

    In this tutorial we will learn how to you can implement form validation in your form with Vue.

    在本教程中,我们将学习如何使用Vue在表单中实现表单验证。

    We want to show the error message as soon as the user hits the submit button—no need to send a response to the server—as the validation is on the client-side. Having a client-side validation does not remove the need of validating requests on your server—that is very important too.

    我们希望在用户单击“提交”按钮后立即显示错误消息,而无需向服务器发送响应,因为验证是在客户端进行的。 进行客户端验证并不会消除对服务器上的请求进行验证的需求,这也非常重要。

    建立第一个例子 (Building the First Example)

    With that established, let’s build our form. First, our App component will only render the Register component:

    建立好之后,让我们建立表格。 首先,我们的App组件将仅呈现Register组件:

    <div id="app">
      <div>
        <Register />
      </div>
    </div>

    The script section will look like this:

    脚本部分如下所示:

    new Vue({
      el: "#app"
    })

    For the Register component we want to show a form with inputs fields:

    对于Register组件,我们要显示一个带有输入字段的表单:

    <div>
        <h2>Register</h2>
    
        <form @submit.prevent="register" method="post">
          <div>
            <label>Name:</label>
            <input type="text" v-model="user.name" />
            <div>{{ errors.name }}</div>
          </div>
          <div>
            <label>Phone:</label>
            <input type="text" v-model="user.phone" />
            <div>{{ errors.phone }}</div>
          </div>
          <div>
            <label>Email:</label>
            <input type="text" v-model="user.email" />
            <div>{{ errors.email }}</div>
          </div>
          <div>
            <label>Password:</label>
            <input type="password" v-model="user.password" />
            <div>{{ errors.password }}</div>
          </div>
          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>

    The .prevent method is used to stop the default behavior of the form when a submission is made. The form has four inputs field for name, email, phone, and password. All of these will need their own validations. If there is an error with any of the inputs, it will be displayed below the input field.

    .prevent方法用于在提交时停止表单的默认行为。 该表格有四个输入字段,分别是名称,电子邮件,电话和密码。 所有这些都需要自己的验证。 如果任何输入有错误,它将显示在输入字段下方。

    Since each field is unique, we need to ensure the validation is suited to match their uniqueness. A general one is that none of the fields should be empty. We can check for this using !field.length, where field will equate to any of the input fields we have. To keep our code clean, the validators will be defined outside the Vue instance. If you are building this in an app that is scaffolded using Vue CLI, it means you’ll have the validators in a separate file.

    由于每个字段都是唯一的,因此我们需要确保验证适合于匹配其唯一性。 一般情况下,所有字段都不为空。 我们可以使用!field.length进行检查,其中field等于我们拥有的任何输入字段。 为了保持我们的代码整洁,将在Vue实例外部定义验证器。 如果要在使用Vue CLI搭建支架的应用程序中构建此文件,则意味着您将在单独的文件中拥有验证程序。

    const validateName = name => {
      if (!name.length) {
        return { valid: false, error: "This field is required" };
      }
      return { valid: true, error: null };
    };
    
    const validatePhone = phone => {
      if (!phone.length) {
        return { valid: false, error: 'This field is required.' };
      }
    
      if (!phone.match(/^[+][(]?[0-9]{1,3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}$/gm)) {
        return { valid: false, error: 'Please, enter a valid international phone number.' };
      }
    
      return { valid: true, error: null };
    }
    
    const validateEmail = email => {
      if (!email.length) {
        return { valid: false, error: "This field is required" };
      }
      if (!email.match(/^\w+([.-]?\w+)_@\w+(_[_.-]?\w+)_(.\w{2,3})+$/)) {
        return { valid: false, error: "Please, enter a valid email." };
      }
      return { valid: true, error: null };
    };
    
    const validatePassword = password => {
      if (!password.length) {
        return { valid: false, error: "This field is required" };
      }
      if (password.length < 7) {
        return { valid: false, error: "Password is too short" };
      }
      return { valid: true, error: null };
    };

    For unique fields like email and phone number, we make use of regex to make sure it matches a specific pattern. Each validator is a function that will receive the input field as a parameter. As you can see from above, each function returns valid and error. This is what we will use to determine if a form should be submitted. To see that in action, here is how the Register component will look:

    对于电子邮件和电话号码等唯一字段,我们使用正则表达式来确保其匹配特定的模式。 每个验证器都是一个函数,它将接收输入字段作为参数。 从上面可以看到,每个函数都返回validerror 。 这就是我们用来确定是否应提交表格的方式。 为了看到实际效果,这是Register组件的外观:

    Vue.component('register', {
      template: '#register',
      data() {
        return {
          user: {
            email: '',
            password: '',
            name: '',
            phone: ''
          },
          valid: true,
          success: false,
          errors: {},
          message: null
        }
      },
      methods: {
    
        register() {
          this.errors = {}
    
          const validName = validateName(this.user.name);
          this.errors.name = validName.error;
          if (this.valid) {
            this.valid = validName.valid
          }
    
          const validPhone = validatePhone(this.user.phone);
          this.errors.phone = validPhone.error;
          if (this.valid) {
            this.valid = validPhone.valid
          }
    
          const validEmail = validateEmail(this.user.email);
          this.errors.email = validEmail.error;
          if (this.valid) {
            this.valid = validEmail.valid
          }
    
          const validPassword = validatePassword(this.user.password)
          this.errors.password = validPassword.error
          if (this.valid) {
            this.valid = validPassword.valid
          }
    
          if (this.valid) {
            alert('HURRAAYYY!! :-)\n\n' + JSON.stringify(this.user))
          }
        }
      }
    })

    If a validator returns an error for any of the fields, the error returned is saved in the errors.fieldName—where fieldName is the name of the input field, and then displayed for the user to see what went wrong.

    如果验证器针对任何字段返回错误,则返回的错误将保存在errors.fieldName -其中fieldName是输入字段的名称,然后显示给用户查看出了什么问题。

    When all fields return valid as true, we can then go ahead to submit the form. For this tutorial, we are displaying an alert box.

    当所有字段都返回validtrue ,我们可以继续提交表单。 对于本教程,我们将显示一个警告框。

    使用Joi (Using Joi)

    Joi allows you to build schemas for JavaScript objects, which can be used to validate inputs. It is often used when working with Express and Restify. We can use it in this tutorial by defining a schema for our Register component.

    Joi允许您为JavaScript对象构建模式,该模式可用于验证输入。 在使用Express和Restify时经常使用它。 我们可以在本教程中通过为Register组件定义一个架构来使用它。

    Here is the schema:

    这是模式:

    import Joi from "joi";
    
    const phoneRegex = /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}$/gm;
    const phone = Joi.string().regex(phoneRegex)
      .options({
        language: {
          string: {
            regex: {
              base: 'must be a valid phone number'
            }
          }
        }
      });
    
    const userValidation = {};
    userValidation.create = {
      first_name: Joi.string().min(2).max(24).required(),
      email: Joi.string().email().required(),
      password: Joi.string().min(7).required(),
      phone: phone.required()
    };

    We can then use the schema in our Register component to validate the inputs of the user:

    然后,我们可以使用Register组件中的模式来验证用户的输入:

    Vue.component('register', {
      template: '#register',
      data() {
        return {
          user: {
            name: '',
            email: '',
            password: '',
            phone: ''
          },
          valid: false,
          success: false,
          errors: {},
          issues: {}
        }
      },
      methods: {
        // method that validates the user input using the schema
        validate(value, schema) {
          const result = Joi.validate(value, schema, { abortEarly: false });
          if (result.error) {
            result.error.details.forEach((error) => {
              this.issues[error.path[0]] = error.message;
            });
            return false;
          }
          return true;
        },
    
        register() {
          // validation method is called and passed the inputs and schema
          this.validate(this.user, userValidation.create);
            if (Object.keys(this.issues).length > 0) {
              this.errors = this.issues;
              return false;
            }
            alert('HURRAAYYY!! :-)\n\n' + JSON.stringify(this.user))
        }
      }
    })

    We declare a validate method that will accept the user inputs and the schema we have defined. If errors are found after the validation we will return a false and the errors encountered. If there are no errors, we display the alert box as we did before.

    我们声明一个validate方法,该方法将接受用户输入和我们定义的模式。 如果在验证后发现错误,我们将返回false和遇到的错误。 如果没有错误,我们将像以前一样显示警报框。

    结论 (Conclusion)

    VeeValidate and Vuelidate are alternatives you can also make use of when handling form validation in your Vue application.

    VeeValidate和Vuelidate是您在Vue应用程序中处理表单验证时也可以使用的替代方法。

    翻译自: https://www.digitalocean.com/community/tutorials/how-to-use-form-validation-in-vue

    vue密码正则验证表单验证

    展开全文
  • vue常用正则验证

    千次阅读 2020-05-26 14:56:13
    前端Vue中常用rules校验规则 前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法。如果错误欢迎指出,后期不断补充更新。 1、是否合法IP地址 export function validate...
  • vue身份证正则校验

    2022-04-29 10:36:08
    对身份证号码进行正则校验 let regs = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2...
  • // 正则验证 rules: { stockpile: [ { required: true, message: "请输入库存", trigger: "blur" }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数', trigger: 'change' } ], }
  • vue表单验证-正则表达式

    千次阅读 2021-03-25 11:09:47
    rules: { creditCode: [{ ... [{ required: true, message: '请再次输入密码', trigger: 'blur' }, { validator: validatePass} ] } 不能为NULL且字数限制1-80:/^[\s|\S]{1,80}$/ 转自:vue+element校验规则
  • Vue表单校验与正则表达式
  • Vue - Ant Design 添加正则验证 <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="地块名称" > <a-input placeholder="请输入地块名称" v-decorator="['areaName', validatorRules...
  • vue el-form表单校验以及常用正则

    千次阅读 2021-08-09 10:59:07
    vue 表单校验以及常用正则 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="表单字段" prop="str"> <el-input v-...
  • Vue 正则验证 邮箱验证为例

    万次阅读 2020-10-23 20:38:46
    我想要做的东西就是,鼠标点击别处然后 页面判断... 前台就这样简单的写写,主要目的就是一个测试嘛 <template> <div id="email"> <...input type="email" v-model="email" @blur="email_blur">... <
  • vue清除表单正则的API

    2022-07-05 17:45:44
    vue清除表单正则的API
  • /* 验证账号 */ export function validateUsername(rule, value, callback) { if (value.length < 6 || value.length > 20) { return callback(new Error('用户名不得小于6个或大于20个字符!')) } else { ...
  • // 验证用户名 过滤特殊符号和空白 export function isvalidUsername(str) { // const urlregex = /^[A-Za-z0-9]+$/ const regex = /^[\u4e00-\u9fa5a-zA-Z0-9\w]+$/g return regex.test(str) } /* 合法...
  • vue组件使用正则表达式验证邮箱、手机号
  • 动态表单验证需要用到prop属性,可参考官方文档:动态增减表单项 局部代码如下 <template> <el-form :model="add_host_Form" size="small"> <el-form-item label="macros"> <el-row ...
  • <template> <div class="addUser"> <!-- 点击添加用户对话框 --&... ...-- 添加用户表单 --> <el-form :model="addUser" :rules="addUserRules" ref="addUser" label-width="70px"> <e
  • 手机号: var validateMobilePhone = (rule, value, callback) =&gt; { if (value === '') { callback(new Error('负责人手机号不可为空')); } else { if (value !== '') { ...
  • VUE表单验证正则表达式车牌号正则校验纯整数(非汉字、字母、符号)` 车牌号正则校验 plateNo: [ { required: true, message: '请输入车牌号', trigger: 'blur' }, { pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新...
  • 代码】vue element ui input 正则验证验证输入框只能输入整数以及只能输入整数和小数。
  • vue中通用正则验证

    千次阅读 2019-12-11 13:16:28
    结合element-ui框架来验证表单 在组件中引用 import { validateIdCard} from '@/utils/validator' 身份证号" prop="userCardID"> 请输入身份证号" v-model="ruleForm.userCardID" > 在data中定义: ...
  • 我是直接在vue项目的from表单中的自定义验证中定义的,直接上代码撸。 rules:{ idNumber: [ { required: true, message: "请输入身份证号", trigger: "blur", }, { //自定义身份证号验证 validator: (rule...
  • vue身份证正则校验的2种类型

    千次阅读 2020-12-19 14:15:42
    vue项目中身份证号码设置了校验,但是在验收的时候还可以输入错误的身份证号码。依旧通过了校验,发现是校验规则不够严格。替换一种新的校验方式 问题描述: 旧的正则校验不够严谨,可以输入合法但错误的身份证号...
  • vue密码正则验证表单验证 vue-form-components (vue-form-components) Clean &... 带有验证的干净&最小的vue表单元素。 View Documentation 查看文件 安装 (Install) NPM (NPM) Installing with np...
  • Form 组件提供了表单验证的功能,只需要通过rules属性传入约定的验证规则,并将 Form-Item 的prop属性设置为需校验的字段名即可。 <!-- 弹出的编辑框 --> <el-dialog :title="editingStatus === '...
  • <head> <meta charset="UTF-8"> , user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue element 自定义表单验证title...
  • vue3.0 使用form 正则表达 1、需要引入 vue的 ref 模块. 2、 form 中 ref 我绑定的是 ruleForm 3、保存按钮不需要传任何值,(图二) 4、需要重新定义 const ruleForm = ref(); 记得 return 出去 // 保存按钮代码 ...
  • 一、正则验证 1.输入字母/数字/下划线: 2.请输入中英文/数字/下划线: 3.请输入中文/英文: 4.规范金额: 5.用户名不能全是数字: 6.中文: 7.非中文: 8.限制长度: 9.数字: 10.正整数及整数: 11.请输入数字(可...
  • vue + element el-form 表单正则验证

    千次阅读 2019-07-24 15:22:11
    手机号校验 const validatePhone = (rule, value, callback) => { if (value === '') { callback(new Error('请输入手机号码~')) } { const phoneRegex = /^1[34578]\d{9}$/ if (!pho...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,448
精华内容 1,379
关键字:

vue表单正则验证