实例介绍
【实例简介】
【实例截图】
【核心代码】
@{
ViewBag.Title = "Create";
Layout = "~/views/shared/_layout.cshtml";
}
<style type="text/css">
body {
word-wrap: break-word;
font-family: "微软雅黑","宋体";
}
.editor-label {
color: #666666;
float: left;
font-size: 14px;
font-weight: bold;
height: 31px;
line-height: 28px;
text-align: right;
width: 100px;
}
.editor-field {
float: left;
width: 700px;
}
.editor-field input, .editor-field select {
border: 1px solid #ccc;
color: #666;
padding: 5px;
margin: 5px;
}
</style>
@Html.Partial("_BoxPartial")
<h2>knockoutJS验证</h2>
<fieldset style="width: 800px;">
<legend>添加商品</legend>
<div class="editor-label">
账号：
</div>
<div class="editor-field">
<input data-bind='value: name' />
<span class="validationWarn">请输入用户名账号，它由字母汉字数字组成</span>
<span class="validationSuccess" data-bind="visible:name.isValid()"></span>
</div>
<div class="editor-label">
Email：
</div>
<div class="editor-field">
<input data-bind='value: Email' />
<span class="validationSuccess" data-bind="visible:Email.isValid()"></span>
</div>
<div class="editor-label">
手机：
</div>
<div class="editor-field">
<input data-bind='value: phone' />
<span class="validationSuccess" data-bind="visible:phone.isValid()"></span>
</div>
<div class="editor-label">
年龄：
</div>
<div class="editor-field">
<input data-bind='value: age' />
<span class="validationWarn">真实的年龄一般在0－100岁之间</span>
<span class="validationSuccess" data-bind="visible:age.isValid()"></span>
</div>
<div class="editor-label">
地址：
</div>
<div class="editor-field">
<input data-bind='value: address' />
<span class="validationWarn">请输入真实的地址</span>
<span class="validationSuccess" data-bind="visible:address.isValid()"></span>
</div>
<div class="editor-label">
姓名：
</div>
<div class="editor-field">
<input data-bind='value: realName' />
<span class="validationWarn">姓名由英文字母组成</span>
<span class="validationSuccess" data-bind="visible:realName.isValid()"></span>
</div>
<div class="editor-label">
身价：
</div>
<div class="editor-field">
<input data-bind='value: peoplePrice' />
<span class="validationSuccess" data-bind="visible:peoplePrice.isValid()"></span>
</div>
<div class="editor-label">
下拉选项：
</div>
<div class="editor-field">
<select data-bind="options: availableCountries,
optionsText: 'countryName',
optionsValue: 'countryPopulation',
value:choseSelect,
optionsCaption: 'please choose'">
</select>
</div>
<div class="editor-label">
复选框：
</div>
<div class="editor-field">
<!-- ko foreach: like -->
<input type="checkbox" data-bind="value: itemValue, checked: $root.chosenlikes" />
<span data-bind="text: itemName"></span>
<!-- /ko -->
</div>
<div style="clear: both;"></div>
<p>
<input type="button" value="Create" data-bind="click:Register" />
</p>
</fieldset>
<style type="text/css">
.validationMessage {
background: url("/scripts/Images/l_registWarningIcon01.png") no-repeat scroll 0 12px rgba(0, 0, 0, 0);
clear: both;
color: #FF000A;
height: 26px;
line-height: 26px;
padding-left: 20px;
padding-top: 8px;
display: inline;
}
.validationSuccess {
background: url("/scripts/Images/l_registWarningIcon02.png") no-repeat scroll 0 12px rgba(0, 0, 0, 0);
clear: both;
color: #FF000A;
height: 26px;
line-height: 26px;
padding-left: 20px;
padding-top: 8px;
display: inline;
}
.validationWarn {
background: url("/scripts/Images/l_registWarningIcon03.png") no-repeat scroll 0 10px rgba(0, 0, 0, 0);
clear: both;
color: #ccc;
height: 26px;
line-height: 26px;
padding-left: 20px;
padding-top: 4px;
display: inline;
float: right;
}
</style>
<script type="text/ecmascript">
var Product = function () {
var self = this;
self.peoplePrice = ko.observable().extend({
required: true,
pattern: { params: /^\d [\.]?\d{0,2}$/g, message: "必须是数字，并且最多两位小数！" }
});
self.peoplePrice.subscribe(function (newValue) {
// alert(self.peoplePrice.isValid());
});
self.name = ko.observable().extend({
minLength: 2,
maxLength: { params: 30, message: "名称最大长度为30个字符" },
required: {
params: true,
message: "请输入名称",
},
});
self.phone = ko.observable().extend({
required: true,
number: {
params: true,
message: "电话不合法",
}
});
self.age = ko.observable().extend({
required: true,
number: {
params: true,
message: "必须是数字",
},
min: { params: 1, message: "年龄最小是１" },
max: 200
});
self.Email = ko.observable().extend({
required: {
params: true,
message: "请填写Email"
},
email: {
params: true,
message: "Email格式不正确"
}
});
self.realName = ko.observable().extend({
required: {
params: true,
message: "请填写realName"
}
});
self.address = ko.observable().extend({
required: {
params: true,
message: "请填写address"
}
});
self.availableCountries = ko.observableArray([
{ countryName: "UK", countryPopulation: 1 },
{ countryName: "US", countryPopulation: 2 },
{ countryName: "CHS", countryPopulation: 3 }
]);
self.choseSelect = ko.observable("1");//选中的项，它会监视前台进行onchange的变化
self.like = ko.observableArray([
{ itemName: 'Music', itemValue: '1' },
{ itemName: 'IT', itemValue: '2' },
{ itemName: 'Sport', itemValue: '3' }
]),
self.chosenlikes = ko.observableArray(["1", "3"])
self.Register = function () {
self.errors = ko.validation.group(self);
if (self.isValid()) {
var arr = "";
for (var i in self.chosenlikes())
arr = i ",";
var json = {
name: self.name(),
address: self.address(),
realName: self.realName(),
like: arr,
availableCountries: self.choseSelect(),
Email: self.Email(),
phone: self.phone(),
age: self.age(),
};
$.ajax({
type: "POST",
url: "/home/CreateAjaxPost",
data: json,
success: function (data) {
alert(JSON.stringify(data.obj));
}
});
} else {
self.errors.showAllMessages();
}
};
}
var prduct = new Product();
ko.applyBindings(prduct);
</script>
标签： 实例 验证 knockoutjs
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论