input标签中和validate中存在required属性的对应的input输入框设置为红色
2015-03-05 10:02
519 查看
今天公司突然提出要将页面中必填的输入框设置成红色,开始是想省事点直接到页面上在必填的输入框中加入样式,这样需要一个一个也页面的改,而且感觉写的很死!后来经过讨论决定采用一种灵活的方式加入样式。经过一天的努力终于成功找到解决办法实现代码如下,虽然代码不长但是却花费了我一天的时间,在里面我又学到了许多知识。
通用方法代码:
/**
* 将页面中的必填选项输入框设置为红色
* @param form 表单名称
* @param validateOption 验证操作名
*/
common.requiredHint = function(form, validateOption){
/**判断validate中是否存在required属性的字段*/
if(validateOption!=null){
var myrules = validateOption.rules;
if(myrules!=null){
for(var item in myrules){
if(myrules[item].required){
$(":input[name="+item+"]",'#'+form).addClass("inputborder");
}
}
}
}
/**判断input属性中是否存在required属性*/
var inputs = $(':input','#'+form);
if(inputs!=null){
for(var i=0;i<inputs.length;i++){
if(inputs[i].required){
$("#"+inputs[i].id).addClass("inputborder");
}
}
}
};
在需要设置必填提示的页面加入如下代码:
common.requiredHint("updateForm",systemParamOptions);
updateForm 为必填项所在表单ID。
systemParamOptions 为validate验证插件定义的规则变量。例如:
var systemParamOptions = {
rules: {
paramName: {
required:true,
maxlength: 25
},
paramValue: {
maxlength: 50
},
paramMemo: {
maxlength: 250
}
},
//设置错误信息显示到指定位置
errorPlacement: function(error, element) {
element = element.parent();
common.showmassage(error, element);
},
success: $.noop,
submitHandler: function(form) {
box.confirm("确定要执行【保存】操作?", function (data) {
if (data) {
$('#updateForm').ajaxPost(dataType.json,submitSuc);
}
}, {
title: '提示信息'
});
}
};
可以从以上代码中学习到一下知识点:
js 中操作json对象,json对象如下
rules: {paramName: {required:true,maxlength: 25},paramValue: {maxlength: 50},paramMemo: {maxlength: 250}}获取对象中的信息可以通过一下的方式
1 for(var item in 对象名(rules)) 通过循环可以逐一获取属性名(例如:paramName、paramValue、paramMemo)也可以通过rules[item].required方式获取指定属性的值。
2 $(":input[name="+item+"]",'#'+form) 在指定form获取指定name 的input 对象。
3 给query对象添加样式方法.addClass("样式名称") 例如:
.inputborder{
border: #CC0033 1px solid;
}
.addClass("inputborder")。
4 获取指定form下的input 对象。$(':input','#'+form);
5 jquery对象与dom对象的区别:var inputs = $(':input','#'+form) inputs是jquery对象。而 inputs[i].required 中的 inputs[i]就是dom 对象(即用传统js方法获取的对象)。jquery对象只能调用jquery定义的方法,不能调用dom对象的方法。同样dom对象也只能调用dom中的方法,不能调用jquery中的方法。详情请参考
通用方法代码:
/**
* 将页面中的必填选项输入框设置为红色
* @param form 表单名称
* @param validateOption 验证操作名
*/
common.requiredHint = function(form, validateOption){
/**判断validate中是否存在required属性的字段*/
if(validateOption!=null){
var myrules = validateOption.rules;
if(myrules!=null){
for(var item in myrules){
if(myrules[item].required){
$(":input[name="+item+"]",'#'+form).addClass("inputborder");
}
}
}
}
/**判断input属性中是否存在required属性*/
var inputs = $(':input','#'+form);
if(inputs!=null){
for(var i=0;i<inputs.length;i++){
if(inputs[i].required){
$("#"+inputs[i].id).addClass("inputborder");
}
}
}
};
在需要设置必填提示的页面加入如下代码:
common.requiredHint("updateForm",systemParamOptions);
updateForm 为必填项所在表单ID。
systemParamOptions 为validate验证插件定义的规则变量。例如:
var systemParamOptions = {
rules: {
paramName: {
required:true,
maxlength: 25
},
paramValue: {
maxlength: 50
},
paramMemo: {
maxlength: 250
}
},
//设置错误信息显示到指定位置
errorPlacement: function(error, element) {
element = element.parent();
common.showmassage(error, element);
},
success: $.noop,
submitHandler: function(form) {
box.confirm("确定要执行【保存】操作?", function (data) {
if (data) {
$('#updateForm').ajaxPost(dataType.json,submitSuc);
}
}, {
title: '提示信息'
});
}
};
可以从以上代码中学习到一下知识点:
js 中操作json对象,json对象如下
rules: {paramName: {required:true,maxlength: 25},paramValue: {maxlength: 50},paramMemo: {maxlength: 250}}获取对象中的信息可以通过一下的方式
1 for(var item in 对象名(rules)) 通过循环可以逐一获取属性名(例如:paramName、paramValue、paramMemo)也可以通过rules[item].required方式获取指定属性的值。
2 $(":input[name="+item+"]",'#'+form) 在指定form获取指定name 的input 对象。
3 给query对象添加样式方法.addClass("样式名称") 例如:
.inputborder{
border: #CC0033 1px solid;
}
.addClass("inputborder")。
4 获取指定form下的input 对象。$(':input','#'+form);
5 jquery对象与dom对象的区别:var inputs = $(':input','#'+form) inputs是jquery对象。而 inputs[i].required 中的 inputs[i]就是dom 对象(即用传统js方法获取的对象)。jquery对象只能调用jquery定义的方法,不能调用dom对象的方法。同样dom对象也只能调用dom中的方法,不能调用jquery中的方法。详情请参考
DOM对象与jquery对象有什么不同。
相关文章推荐
- 不同浏览器兼容问题—— input 添加required属性 firefox下输入框为红色 +禁止中文输入
- 不同浏览器兼容问题—— input 添加required属性 firefox下输入框为红色 +禁止中文输入
- HTML5里的input标签的required属性的提示
- 改HTML5里的input标签的required属性的提示为英文的
- EditText的InputType属性,可以在代码中设置,也可以预先在xml中定义对应关系
- input标签动态设置只读属性及其兼容性
- html标签padding--设置 btn的背景色,背景颜色方法, input的src属性
- 设置输入框input中placeholder属性的字体颜色、字号
- HTML5里的input标签的required属性提示文字修改
- required - HTML5里的input标签的required属性提示文字修改
- jquery easyui 输入框 禁止输入负数 设置属性data-options="min:0,required:true"
- Chrome独有的input标签扩展属性required?
- HTML-input标签需设置的属性
- 标签for属性与对应的id之关系
- Embed标签的功能、语法和属性设置
- Flex中如何遍历TabBar控件的各个Tab,并且通过labelPlacement属性设置标签位置
- javascript createElement()创建input不能设置name属性的解决方法
- javascript createElement()创建input不能设置name属性的解决方法
- html input type text标签属性和方法事件 (一)
- Silverlight Object 标签属性介绍、初始化参数的设置和获取、客户端系统信息获取