Element-Plus Form Validation
This guide will help you understand how to use the isInRangeForElementPlus function for form validation in Element-Plus.
Syntax
ts
isInRangeForElementPlus(name, options, lang);isInRangeForElementPlus(name, options, lang);Parameters
name(string): The name of the field to be validated.options(object): An object containing validation rules. The properties of this object are optional and are as follows:
| Property | Description |
|---|---|
| positive | If true, the value must be a positive number |
| integer | If true, the value must be an integer |
| positiveInteger | If true, the value must be a positive integer |
| negative | If true, the value must be a negative number |
| negativeInteger | If true, the value must be a negative integer |
| decimal | The maximum number of decimal places allowed |
| min | The minimum value allowed |
| max | The maximum value allowed |
| unit | The unit of the value, used in error messages |
lang(string): The language of the error messages. It can be either 'en' for English or 'zh' for Chinese.
Usage
The isInRangeForElementPlus function is used as a custom validator in Element-Plus form validation. It checks if the input value is within a certain range and meets certain conditions specified in the options parameter.
Here is an example of how to use it:
Vue
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="Amount" prop="amount1">
<el-input v-model="form.amount1"></el-input>
</el-form-item>
<el-form-item label="数量" prop="amount2">
<el-input v-model="form.amount2"></el-input>
</el-form-item>
</el-form>
</template>
<script setup>
import {ref} from 'vue'
import { ElInput } from 'element-plus'
import { isInRangeForElementPlus } from 'pixiu-number-toolkit-vue';
const form=ref({amount1:'',amount2:''})
const rules={
amount1: [
{
required:true,
validator: isInRangeForElementPlus('Amount', { min: 0, max: 100, decimal: 2 }, 'en'),
trigger: 'blur'
},
],
amount2: [
{
required:true,
validator: isInRangeForElementPlus('数量', { min: 0, max: 100, decimal: 2 }, 'zh'),
trigger: 'blur'
},
],
}
</script><template>
<el-form :model="form" :rules="rules">
<el-form-item label="Amount" prop="amount1">
<el-input v-model="form.amount1"></el-input>
</el-form-item>
<el-form-item label="数量" prop="amount2">
<el-input v-model="form.amount2"></el-input>
</el-form-item>
</el-form>
</template>
<script setup>
import {ref} from 'vue'
import { ElInput } from 'element-plus'
import { isInRangeForElementPlus } from 'pixiu-number-toolkit-vue';
const form=ref({amount1:'',amount2:''})
const rules={
amount1: [
{
required:true,
validator: isInRangeForElementPlus('Amount', { min: 0, max: 100, decimal: 2 }, 'en'),
trigger: 'blur'
},
],
amount2: [
{
required:true,
validator: isInRangeForElementPlus('数量', { min: 0, max: 100, decimal: 2 }, 'zh'),
trigger: 'blur'
},
],
}
</script>