ADD 表单验证演示，并且关闭async-validator全局控制台警告

src/api/model/demo.js

@@ -5,8 +5,8 @@ export default {
 	ver: {
 		url: `${config.API_URL}/demo/ver`,
 		name: "获取最新版本号",
-		get: async function(){
+		get: async function(params){
-			return await http.get(this.url);
+			return await http.get(this.url, params);
 		}
 	},
 	post: {

src/api/model/system.js

@@ -4,7 +4,7 @@ import http from "@/utils/request"
 export default {
 	menu: {
 		myMenus: {
-			url: `${config.API_URL}/system/menu/my/1.6.0`,
+			url: `${config.API_URL}/system/menu/my/1.6.1`,
 			name: "获取我的菜单",
 			get: async function(){
 				return await http.get(this.url);

src/scui.js

@@ -74,6 +74,9 @@ export default {
 			app.component(`ScIcon${icon}`, scIcons[icon])
 		}
 
+		//关闭async-validator全局控制台警告
+		window.ASYNC_VALIDATOR_NO_WARNING = 1
+
 		//全局代码错误捕捉
 		app.config.errorHandler = errorHandler
 	}

src/utils/verificate.js

@@ -0,0 +1,18 @@
+
+//验证手机号
+export function verifyPhone(rule, value, callback) {
+	let reg = /^[1][3, 4, 5, 6, 7, 8, 9][0-9]{9}$/
+	if(!reg.test(value)){
+		return callback(new Error('请输入正确的手机号码'))
+	}
+	callback()
+}
+
+//车牌号码
+export function verifyCars(rule, value, callback) {
+	let reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/
+	if(!reg.test(value)){
+		return callback(new Error('请输入正确的车牌号码'))
+	}
+	callback()
+}

src/views/other/verificate.vue

@@ -0,0 +1,139 @@
+<template>
+	<el-main>
+		<el-card shadow="never" header="async-validator内置">
+			<el-form ref="form" :model="form" :rules="rules" label-width="100px" status-icon>
+				<el-form-item label="必填" prop="required">
+					<el-input v-model="form.required"></el-input>
+				</el-form-item>
+				<el-form-item label="长度" prop="length">
+					<el-input v-model="form.length" placeholder="长度需为3位"></el-input>
+				</el-form-item>
+				<el-form-item label="类型" prop="type">
+					<el-input v-model="form.type" placeholder="类型可为string number boolean array date url email等"></el-input>
+				</el-form-item>
+				<el-form-item label="范围" prop="range">
+					<el-input v-model="form.range" placeholder="请填写范围在3至5位"></el-input>
+				</el-form-item>
+				<el-form-item label="枚举" prop="enum">
+					<el-input v-model="form.enum" placeholder="请填写admin，user，guest其一"></el-input>
+				</el-form-item>
+				<el-form-item label="自定义" prop="custom">
+					<el-input v-model="form.custom" placeholder="请填写数字1"></el-input>
+				</el-form-item>
+				<el-form-item label="异步验证" prop="async">
+					<el-input v-model="form.async" placeholder="请输入SCUI最新版本号,form开启status-icon后 可以查看右侧状态"></el-input>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submit">验证所有字段</el-button>
+					<el-button @click="resetForm('form')">Reset</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+		<el-card shadow="never" header="自定义" style="margin-top: 15px;">
+			<el-form ref="form2" :model="form2" :rules="rules2" label-width="100px" status-icon>
+				<el-form-item label="手机号码" prop="phone">
+					<el-input v-model="form2.phone"></el-input>
+				</el-form-item>
+				<el-form-item label="车牌号码" prop="cars">
+					<el-input v-model="form2.cars"></el-input>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submit2">验证所有字段</el-button>
+					<el-button @click="resetForm('form2')">Reset</el-button>
+				</el-form-item>
+			</el-form>
+			<el-alert title="自定义验证可在 @/utils/verificate.js 中不断扩展业务需要的验证. 记得要 import 进来" type="success" />
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	import { verifyPhone, verifyCars } from '@/utils/verificate'
+
+	export default {
+		name: 'verificate',
+		data() {
+			return {
+				form: {
+
+				},
+				rules: {
+					required: [
+						{ required: true, message: '请填写' }
+					],
+					length: [
+						{ required: true, len: 3, message: '长度需为3位' }
+					],
+					type: [
+						{ required: true, type: 'email', message: '类型需为email' }
+					],
+					range: [
+						{ required: true, min: 3, max: 5, message: '范围在3至5位' }
+					],
+					enum: [
+						{ required: true, type: 'enum', enum: ['admin', 'user', 'guest'], message: '请填写admin，user，guest其一' }
+					],
+					custom: [
+						{ required: true, validator: (rule, value)=>{return value === '1'}, message: '请填写数字1' , trigger:'blur'}
+					],
+					async: [
+						{
+							required: true,
+							validator: (rule, value, callback)=>{
+								this.$API.demo.ver.get({value: value}).then(res => {
+									if(res.data != value){
+										return callback(new Error('请输入SCUI最新版本号：'+res.data))
+									}
+									callback()
+								})
+							},
+							trigger:'blur'
+						}
+					]
+				},
+				form2: {
+
+				},
+				rules2: {
+					phone: [
+						{ required: true, message: '请输入姓名' },
+						{ validator: verifyPhone, trigger:'blur' }
+					],
+					cars: [
+						{ required: true, validator: verifyCars, trigger:'blur' }
+					]
+				}
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			submit(){
+				this.$refs.form.validate(async (valid) => {
+					if (valid) {
+						this.$message.success("全部验证通过")
+					}else{
+						return false;
+					}
+				})
+			},
+			submit2(){
+				this.$refs.form2.validate(async (valid) => {
+					if (valid) {
+						this.$message.success("全部验证通过")
+					}else{
+						return false;
+					}
+				})
+			},
+			resetForm(ref){
+				this.$refs[ref].resetFields()
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>