Uniapp零基础开发学习笔记(2) - 简单格式检查和事件响应

Uniapp零基础开发学习笔记(2) - 简单格式检查和事件响应

在hello-uni app的示例中，点击submit提交按钮，会检查姓名是否多于3个字符。
可以看到代码中引入了graceChecker.js,在这里复制过来引入。
这里有两种引入方法：
相对引入 import graceChecker from “…/…/common/graceChecker.js”
…/…/表示相对会退两级
绝对引入 import graceChecker from “@common/graceChecker.js”
@表示根目录
引入写在标签中
在标签中的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('清空数据')
			}
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

表单规则按照实际情况改为如下：

//定义表单规则
var rule = [
{name:"username", checkType : "string", checkRule:"3,10",  errorMsg:"用户名应为3-10个字符"},
{name:"userpwd",checkType : "string", checkRule:"6,10",  errorMsg:"密码应为6-10个字符"}
];
1
2
3
4
5

编译后输入测试字符验证，控制台中可以看到返回了正确的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
1
2
3

20:49:09.365 form发生了submit事件，携带数据为：{“username”:“user”,“userpwd”:“123456”} at pages/login/login.vue:37