-
Notifications
You must be signed in to change notification settings - Fork 0
/
validation的使用-1.html
108 lines (91 loc) · 4.03 KB
/
validation的使用-1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.selfError {
background: red;
}
</style>
</head>
<body>
<form action="http://www.baidu.com" data-bind="submit:yanzheng">
<label>姓名：</label><input type="text" data-bind="value:Name"/><br />
<label for="">邮箱：</label><input type="text" data-bind="value:Email"/><br />
<label for="">邮箱正则校验：</label><input type="text" data-bind="value:Email2"/><br />
<label for="">地址：</label>
<select data-bind="options:CityList,optionsText:'name',optionsValue:'Code',value:City,optionsCaption:'请选择'"></select>
<select data-bind="options:currentArea,optionsText:'name',optionsValue:'Code',value:Area,optionsCaption:'请选择区县'">
</select>
<label for="">现在需要对表单做一个客户端的验证 需要引入KO的一个验证插件 validation；这只是验证。如果你还想信息继续跟随表单一起提交，需要一个return:true</label>
<input type="submit" value="提交" />
</form>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/knockout.js"></script>
<script src="js/knockout.validation.min.js"></script>
<script>
$(function() {
// 做validation的初始化配置 里面是一个json对象
ko.validation.configure({
registerExtender:true, // 这个属性允许我们在ko.observable()后面直接接extend(),去绑定一个属性 比如：
// ko.observable({require:true}); 这中间是一个json对象
// 下面这个 就是当你的文本后面 输入框输入的内容不符合要求，后面会出现提示文本
insertMessages:true,
errorClass:'selfError'
});
var viewModel = function() {
var self = this;
// 英文的提示信息 默认提示信息 这里是不能为空的
self.Name = ko.observable("").extend({required:true});
// 自定义中文提示信息
self.Email = ko.observable("这里只是验证是否为空").extend({required:{message:'请输入您的邮箱'}});
self.Email2 = ko.observable("").extend({required:{message:'您的邮箱地址为空'}}).extend({pattern:{message:'请输入正确的邮箱地址',params:'^([a-zA-Z0-9_-])+\@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$'}});
// 保存的是当前选中的市
self.City = ko.observable("");
// 保存的是当前选中的区
self.Area = ko.observable("");
self.CityList = ko.observableArray([
{name:"A市",Code:"1001"},
{name:"B市",Code:"1002"}
]);
self.AreaList = ko.observableArray([
{name:"A市1区",Code:"1001001",CityCode:"1001"},
{name:"A市2区",Code:"1001002",CityCode:"1001"},
{name:"A市3区",Code:"1001003",CityCode:"1001"},
{name:"B市1区",Code:"1002001",CityCode:"1002"},
{name:"B市2区",Code:"1003002",CityCode:"1002"},
{name:"B市3区",Code:"1004003",CityCode:"1002"}
]);
//上面是所有的区 这是不合适的
self.currentArea = ko.computed(function(){
// 使用KO提供的过滤方法
return ko.utils.arrayFilter(self.AreaList(),function(area){
return area.CityCode == self.City();
});
},self);
//写一个验证的方法
self.yanzheng = function() {
//alert(1);
// errors是一个方法 一定要注意这个常犯的错误
if(self.errors().length>0) {
// 展示所有错误信息 这个errors就是下面的那个errors
self.errors.showAllMessages();
// 下面这句话就是 阻止表单的默认行为，已经产生错误，不能让其提交
return false;
} else {
// 进入到这儿，说明没错误
// 让表单执行提交操作
return true;
}
return true;
};
}
var currentVeiwModel = new viewModel();
ko.applyBindings(currentVeiwModel);
// 将错误信息保存下来
currentVeiwModel.errors = ko.validation.group(currentVeiwModel);
});
</script>
</html>