from表单pattern用法

https://www.antdv.com/components/form-cn/<a-input

 

placeholder="请填写用户ID"

v-decorator="[

'userid',

{

rules: [

//number这个有问题

{

pattern: /^[0-9]+$/,

message: '请输入正整数',

},

 

pattern: /^[0-9](\d{0,1})$/       --------纯数字且2位数

pattern: /^(100|[1-9]\d|\d)$/      --------输入100以为纯数字

 

例子

<template>
  <div>
    
    <H2 style="position: relative; left: 20px; top: 35px"
      ><a-icon type="monitor" />购课用户数据清除</H2
    >
    <div style="position: relative; top: 110px; left: 60px">
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        @submit="handleSubmit"
      >
        <a-form-item label="所在环境">
          <a-select
            v-decorator="[
              'enviroment',
              { rules: [{ required: true, message: '该字段是必填字段' }] },
            ]"
            placeholder="请选择环境"
          >
            <!-- <a-select-option value="1"> dev </a-select-option> -->
            <a-select-option value="2"> test </a-select-option>
            <a-select-option value="3"> staging </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="用户ID">
          <a-input
            placeholder="请填写用户ID"
            v-decorator="[
              'userid',
              {
                rules: [
                //number这个有问题
                 {
                    pattern: /^[0-9]+$/,
                    message: '请输入正整数',
                  },
                  {
                    required: true,
                    message: '该字段是必填字段',
                  }
                ],
              },
            ]"
          />
        </a-form-item>

        <!-- 提交/重置按钮 -->
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit" :loading=loading> 提交</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <JsonViewer style="top:150px" v-if='text' :value="text ? text : ''"/>
  </div>
</template>

<script>
import {request} from "../../../network/request"
import JsonViewer from 'vue-json-viewer'
import {deleUser} from "../../../api/index"

export default {
  
  data() {
    return {
      loading:false,
      text:{},
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
    }; 
  },
  methods: {
    handleSubmit(e) {
      this.text={};
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (!err) {
          this.loading=true
          if (values.enviroment==2){
            // test环境请求
            this.text=await deleUser(`${values.userid}`);
                // http://192.168.178.235:8380/tool/deleteuser?userid=1000688084
            this.loading=false
          }
          else{
            //staging环境请求
            this.text=await deleUser(`${values.userid}`+"&evn=2");
            this.loading=false
          }
                }
                }
      );
      
    },
    //重置
    handleReset() {
      this.form.resetFields();
      this.text={};
    },
  },
components:{
      JsonViewer
    },
};
</script>

 

效果