async-validator-uniapp
Advanced tools
###安装
npm init -y
npm i async-validator-uniapp --save
import xPlus from 'async-validator-uniapp'
[WARNING] uniapp模块停止更新，如果需要拷贝到项目，请npm下载后拷贝使用，入口文件是index.js
import xPlus from "async-validator-uniapp"
xPlus.install(Vue);
import {xForm} from "async-validator-uniapp";
import {xInput} from "async-validator-uniapp";
import {xCheckboxGroup} from "async-validator-uniapp";
import {xCheckbox} from "async-validator-uniapp";
import {xRadioGroup} from "async-validator-uniapp";
import {xRadio} from "async-validator-uniapp";
import {xPicker} from "async-validator-uniapp";
import {xTextarea} from "async-validator-uniapp";
this.$refs['form的ref'].validate
this.$refs['form的ref'].validateField('对应表单的prop')
this.$refs['form的ref'].resetFields('对应表单的prop,如果不填就是清空整个form')
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| rules | object | -- | 必填，校验规则 |
| model | object | -- | 必填，表单数据 |
| ref | Object | -- | x-form组件的应用可以调用validateField和validate |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | string | -- | 默认text,类型请参考uniapp文档 |
| value | string | Number | 表单显示值 |
| prop | string | -- | 对应的校验规则，强烈推荐和该表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | Number | 表单显示值 |
| prop | string | -- | 对应的校验规则，强烈推荐和该表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | Number | 表单显示值 |
| prop | string | -- | 对应的校验规则，强烈推荐和该表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | -- | 表单显示值 |
| label | string | -- | 提示文字 |
| disabled | Boolean | false | 禁用 |
| prop | string | -- | 对应的校验规则，强烈推荐和该表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | -- | 表单显示值 |
| label | string | -- | 提示文字 |
| disabled | Boolean | false | 禁用 |
| prop | string | -- | 对应的校验规则，强烈推荐和该表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | -- | 表单显示值 |
| label | string | -- | 提示文字 |
| disabled | Boolean | false | 禁用 |
| prop | string | -- | 对应的校验规则，强烈推荐和该表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | Number | 表单显示值 |
| disabled | Boolean | false | 禁用 |
| placeholder | String | "请选择" | 占位符 |
| prop | string | -- | 对应的校验规则，强烈推荐和该表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<x-form :rules="rules" :model="form" ref="ruleForm" @submit="customerSubmit">
<view class="uni-form-item uni-column">
<view class="title">普通文字(改变的时候检测){{form.input}}</view>
<x-input type="text" :val="form.input" @input="form.input=$event" prop="input"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">普通文字(失去焦点的时候检测){{form.input2}}</view>
<x-input type="text" :val="form.input2" @input="form.input2=$event" prop="input2"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">密码:{{form.password}}</view>
<x-input type="password" :val="form.password" @input="form.password=$event" prop="password"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">数字{{form.number}}</view>
<x-input type="number" :val="form.number" @input="form.number=$event" prop="number"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">小数点数字{{form.digit}}</view>
<x-input type="digit" :val="form.digit" @input="form.digit=$event" prop="digit"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">身份证{{form.idcard}}</view>
<x-input type="idcard" :val="form.idcard" @input="form.idcard=$event" prop="idcard"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">普通文字(改变的时候检测){{form.textarea}}</view>
<x-textarea type="text" placeholder="羊羊得亿" :value="form.textarea" @input="form.textarea=$event" prop="textarea"></x-textarea>
</view>
<view class="uni-btn-v">
<button formType="submit">使用Submit</button>
<button @tap="customerSubmit">不使用Submit提交</button>
<button type="default" formType="reset">Reset</button>
</view>
</x-form>
</view>
</view>
</template>
<script>
export default {
data() {
const customX = (rule, value, callback) => {
if (value!==""&&value!=100) {
callback(new Error('请输入100'));
}
else{
callback();
}
};
return {
title: 'form',
pickerHidden: true,
chosen: '',
form: {
input: "zz00",
input2: "zzyy",
passwordx: "123456",
number: "",
digit: "",
idcard: "",
textarea: "",
},
rules: {
textarea: [{
required: true,
message: '请输入textarea',
trigger: 'change'
}],
input: [{
required: true,
message: '请输入txt',
trigger: 'change'
}],
input2: [{
required: true,
message: '请输入input2',
trigger: 'blur'
}],
password: [{
required: true,
message: '请选择密码',
trigger: 'change'
}],
number: [{
required: true,
message: '请输入数字',
trigger: 'change'
}],
digit: [{
required: true,
message: '请输入小数点数字',
trigger: 'change'
}],
idcard: [{
required: true,
message: '请输入身份证',
trigger: 'change'
}]
}
}
},
methods: {
pickerConfirm: function(e) {
this.pickerHidden = true
this.chosen = e.target.value
},
pickerCancel: function(e) {
this.pickerHidden = true
},
pickerShow: function(e) {
this.pickerHidden = false
},
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
},
formReset: function(e) {
console.log("清空数据")
this.chosen = ''
},
xchange() {
console.log("改变")
},
customerSubmit() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
validInput(k) {
this.$refs['ruleForm'].validateField(k)
}
}
}
</script>
<style>
.title {
padding: 10px 0 !important;
}
</style>
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<x-form :rules="rules" :model="form" ref="ruleForm" @submit="customerSubmit">
<view class="uni-form-item uni-column">
<view class="title">radio{{form.radio}}</view>
<x-radio-group :val="form.radio" @input="form.radio=$event" prop="radio">
<x-radio value="1" label="选项1" :checked="form.radio===1?true:false" :disabled="true" />
<x-radio value="2" label="选项2" :checked="form.radio===2?true:false" :disabled="true" />
</x-radio-group>
</view>
<view class="uni-form-item uni-column">
<view class="title">checkbox</view>
<x-checkbox-group :val="form.checkbox" @input="form.checkbox=$event" prop="checkbox" :disabled="true">
<template v-for="item in items">
<x-checkbox :key="item.value" :value="item.name" :label="item.value" :checked="form.checkbox.includes(item.name)"
:disabled="item.disabled" />
</template>
</x-checkbox-group>
<button @tap="validInput('checkbox')">验证单个表单</button>
</view>
<view class="uni-btn-v">
<button formType="submit">使用Submit</button>
<button @tap="customerSubmit">不使用Submit提交</button>
<button type="default" formType="reset">Reset</button>
</view>
</x-form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'form',
pickerHidden: true,
chosen: '',
items: [{
name: 'USA',
value: '美国',
disabled: true
},
{
name: 'CHN',
value: '中国'
},
{
name: 'BRA',
value: '巴西'
},
{
name: 'JPN',
value: '日本'
},
{
name: 'ENG',
value: '英国'
},
{
name: 'TUR',
value: '法国'
}
],
form: {
checkbox: [],
radio: "",
},
rules: {
checkbox: [{
type: 'array',
required: true,
message: '请选择checkbox',
trigger: 'change'
},
{
type: 'array',
min: 2,
message: '请选择至少2个checkbox',
trigger: 'change'
},
],
radio: [{
required: true,
message: '请选择radio',
trigger: 'change'
}]
}
}
},
methods: {
pickerConfirm: function(e) {
this.pickerHidden = true
this.chosen = e.target.value
},
pickerCancel: function(e) {
this.pickerHidden = true
},
pickerShow: function(e) {
this.pickerHidden = false
},
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
},
formReset: function(e) {
console.log("清空数据")
this.chosen = ''
},
xchange() {
console.log("改变")
},
customerSubmit() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
validInput(k) {
this.$refs['ruleForm'].validateField(k)
}
}
}
</script>
<style>
.title {
padding: 10px 0 !important;
}
</style>
###picker
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<x-form :rules="rules" :model="form" ref="ruleForm" @submit="customerSubmit">
<view class="uni-form-item uni-column">
<view class="title">时间选择:{{form.time}}</view>
<x-picker mode="time" start="09:00" end="06:00" :value="form.time" @input="form.time=$event" prop="time"></x-picker>
</view>
<view class="uni-btn-v">
<button formType="submit">使用Submit</button>
<button @tap="customerSubmit">不使用Submit提交</button>
<button type="default" formType="reset">Reset</button>
</view>
</x-form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'form',
pickerHidden: true,
chosen: '',
form: {
time: "24:00"
},
rules: {
time: [{
required: true,
message: '请选择time',
trigger: 'change'
}]
}
}
},
methods: {
pickerConfirm: function(e) {
this.pickerHidden = true
this.chosen = e.target.value
},
pickerCancel: function(e) {
this.pickerHidden = true
},
pickerShow: function(e) {
this.pickerHidden = false
},
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
},
formReset: function(e) {
console.log("清空数据")
this.chosen = ''
},
xchange() {
console.log("改变")
},
customerSubmit() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
validInput(k) {
this.$refs['ruleForm'].validateField(k)
}
}
}
</script>
<style>
.title {
padding: 10px 0 !important;
}
</style>
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<x-form :rules="rules" :model="form" ref="ruleForm">
<view class="uni-form-item uni-column">
<view class="title">自定义规则，必须等于100</view>
<x-input type="text" :val="form.custom" @input="form.custom=$event" prop="custom"></x-input>
</view>
<view class="uni-btn-v">
<button formType="submit">使用Submit</button>
<button @tap="customerSubmit">不使用Submit提交</button>
<button type="default" formType="reset">Reset</button>
</view>
</x-form>
</view>
</view>
</template>
<script>
export default {
data() {
const customX = (rule, value, callback) => {
if (value!==""&&value!=100) {
callback(new Error('请输入100'));
}
else{
callback();
}
};
return {
title: 'form',
pickerHidden: true,
chosen: '',
form: {
custom:""
},
rules: {
custom:[
{
required: true,
message: '请输入',
trigger: 'change'
},
{ validator: customX, trigger: 'blur' }
]
}
}
},
methods: {
pickerConfirm: function(e) {
this.pickerHidden = true
this.chosen = e.target.value
},
pickerCancel: function(e) {
this.pickerHidden = true
},
pickerShow: function(e) {
this.pickerHidden = false
},
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
},
formReset: function(e) {
console.log("清空数据")
this.chosen = ''
},
xchange() {
console.log("改变")
},
customerSubmit() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
validInput(k) {
this.$refs['ruleForm'].validateField(k)
}
}
}
</script>
<style>
.title {
padding: 10px 0 !important;
}
</style>
FAQs
a simgle tool for valid form
We found that async-validator-uniapp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.