<> preface
Whenever you do a project, you will encounter the requirement that only integers and decimals can be entered into the validation input box
<>STEP one , The input must be a positive integer , You cannot enter a decimal point , This reference is element-ui Verification of
v-model plus .number Modifier , Set in inspection rule type by number
<el-form :model="form" :rules="rules" ref="form"> <el-form-item prop=
"positive_integer"> <el-input clearable v-model.number="form.positive_integer"
maxlength="5" placeholder=" Please input the amount " ></el-input> </el-form-item> </el-form> <div
slot="footer" class="dialog-footer"> <el-button @click="cancel('form')"> take eliminate </el-
button> <el-button type="primary" @click="update_money('form')">{{
tip_money_text== 0 ? " Recharge " : " next step " }}</el-button> </div> export default { data()
{ return { form: { amount_of_money: "", positive_integer:"", }, rules: {
amount_of_money: [ { required: true, message: " Please input the amount ", trigger: "blur" }, ],
positive_integer: [ { required: true, message: " Please input the amount ", trigger: "blur" }, {
type: "number", message: " The amount must be an integer " }, ], }, } } }
<>STEP two , Only integers can be entered , decimal , But you can't just enter the decimal point , It can't have two decimal points , Only two decimal places can be reserved
This encapsulates a common method , Without a regular expression , Because I started with a regular expression , But you can only enter the decimal point , This does not meet the demand , So it encapsulates a method .
<> This is solved with only one regular expression , Suitable for not very strict verification <el-input v-model="orderQDto" @keyup.native=
"onlyNumber()" :placeholder="$t('language.query.min')" ></el-input> methods: {
onlyNumber() { if (this.orderQDto!= null) { this.orderQDto= this.orderQDto.
replace(/[^\.\d]/g, ""); } }, } <> This is a common way to encapsulate , Complete solution can only enter integer and decimal demand
This method is based on vue-cli It's written in the scaffold , It's in English element-ui The framework of
Public access index.js
export function onlyNumOnePoint(number_only) { // First, replace all the non digital ones , Except for numbers and decimal points
number_only= number_only.replace(/[^\d.]/g, ""); // You must make sure that the first one is a number, not a decimal point number_only
= number_only.replace(/^\./g, ""); // Ensure that there is only one decimal point without multiple decimal points number_only =
number_only.replace(/\.{2,}/g, "."); // Ensure that the decimal point appears only once , Not more than twice number_only =
number_only.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");
// Only two decimals can be entered number_only = number_only.replace(/^(\-)*(\d+)\.(\d\d).*$/,
'$1$2.$3'); return number_only; }
On the page that needs to be introduced
<el-input clearable @keyup.native="onlyNumber()" v-model="amount_of_money"
placeholder=" Please input 22 amount of money " ></el-input> import { onlyNumOnePoint} from
"@/utils/index"; methods: { onlyNumOnePoint, onlyNumber() { this.amount_of_money
= this.onlyNumOnePoint(this.amount_of_money); }, }
<> Concluding remarks
of course , There are more such input boxes on your page , You can encapsulate this input box twice , It's OK to transfer parameters directly , This is also convenient for unified management . okay , What needs to be improved , It will be updated later .
Technology
Daily Recommendation