Uniapp零基础开发学习笔记(2) - 简单格式检查和事件响应
在hello-uni app的示例中,点击submit提交按钮,会检查姓名是否多于3个字符。
可以看到代码中引入了graceChecker.js,在这里复制过来引入。
这里有两种引入方法:
相对引入 import graceChecker from “…/…/common/graceChecker.js”
…/…/表示相对会退两级
绝对引入 import graceChecker from “@common/graceChecker.js”
@表示根目录
引入写在<script></script>
标签中
在<script></script>
标签中的export default {methods: {}}中参考复制以下内容用于检查格式和响应事件,
代码中有两个事件formSubmit和formReset。
methods: {
formSubmit: function(e) {
console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
//定义表单规则
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: function(e) {
console.log('清空数据')
}
}
表单规则按照实际情况改为如下:
//定义表单规则
var rule = [
{name:"username", checkType : "string", checkRule:"3,10", errorMsg:"用户名应为3-10个字符"},
{name:"userpwd",checkType : "string", checkRule:"6,10", errorMsg:"密码应为6-10个字符"}
];
编译后输入测试字符验证,控制台中可以看到返回了正确的username和userpwd
20:39:52.761 form发生了submit事件,携带数据为:{"username":"","userpwd":""} at pages/login/login.vue:37
20:40:00.702 form发生了submit事件,携带数据为:{"username":"asdas","userpwd":""} at pages/login/login.vue:37
20:40:05.537 form发生了submit事件,携带数据为:{"username":"asdas","userpwd":"123214"} at pages/login/login.vue:37
20:49:09.365 form发生了submit事件,携带数据为:{“username”:“user”,“userpwd”:“123456”} at pages/login/login.vue:37