<template>
<view>
<view class="">
<form @submit="formSubmit" @reset="formReset">
<view>
<input class="uni-input" name="nickname" placeholder="请输入姓名" />
</view>
<view>
<radio-group name="gender">
<label>
<radio value="男" /><text>男</text></label>
<label>
<radio value="女" /><text>女</text></label>
</radio-group>
</view>
<view>
<checkbox-group name="loves">
<label>
<checkbox value="读书" /><text>读书</text>
</label>
<label>
<checkbox value="写字" /><text>写字</text>
</label>
</checkbox-group>
</view>
<view>
<slider value="20" name="age" show-value=""></slider>
</view>
<view>
<switch name="switch" />
</view>
<button form-type="submit">Submit</button>
<button form-type="reset">Reset</button>
</form>
</view>
</view>
</template>
<script>
var graceChecker = require("../../common/graceChecker.js");
export default {
data() {
return {
}
},
methods: {
formSubmit(e){
console.log(‘form发生了submit事件，携带数据为：‘ + JSON.stringify(e.detail.value));
// {"nickname":"1233","sex":"女","loves":["读书","写字"],"age":49,"switch":true}
//定义表单规则
var rule = [
{name:"nickname", checkType : "string", checkRule:"1,3", errorMsg:"姓名应为1-3个字符"},
{name:"gender", checkType : "in", checkRule:"男,女", errorMsg:"请选择性别"},
{name:"loves", checkType : "notnull", checkRule:"", errorMsg:"请选择爱好"}
];
//进行表单检查
var formData = e.detail.value;
var checkRes = graceChecker.check(formData, rule);
if(checkRes){
uni.showToast({title:"验证通过!", icon:"none"});
}else{
uni.showToast({ title: graceChecker.error, icon: "none" });
}
},
formReset(e) {
console.log("自带清空from所有数据功能");
}
}
}
</script>
<style>
</style>
<!--
1. string
功能 : 字符串及长度检查
规则 : 最小长度,最大长度 如 1,3 或 2, 2,代表只检查最短
2. int
功能 : 整数及长度检查
规则 : 最小长度,最大长度 如 1,3
3. between
功能 : 数值区间检查
规则 : 最小值,最大值 如 1,3 或 2.5,1000
4. betweenD
功能 : 数值区间检查【整数】
规则 : 最小值,最大值 如 1,3 或 2,1000
5. same
功能 : 等值检查
规则 : 对应的值
6. notsame
功能 : 不等值检查
规则 : 对应的值
7. email
功能 : 邮箱检查
规则 : 无需设置
8. phoneno
功能 : 11位手机号检查
规则 : 无需设置
9. zipcode
功能 : 6位邮编检查
规则 : 无需设置
10. reg
功能 : 正则表达式检查
规则 : 正则表达式内容 如 "^[0-9]{1,2}$"
11. in
功能 : 包含某个字符串的检查
规则 : 字符串集，如："北京,上海"
12. notnull
功能 : 不为空检查【null 或者 空数组】
规则 : 无需设置
-->
