最近在项目中,做一个表单提交验证,要求一个公司名称和一个公司编号都不能为空,这个简单,只要利用jQuery Validate来进行表单验证即可。
但是因为需求,需要对某个特殊公司进行特殊处理,该公司没有公司编码,无法填写公司编码。
所以,根据公司名称对该公司做了特殊处理。
这里运用了js对input标签的属性控制和值控制,并且使用鼠标移除事件blur来处理。
基本上只要有过开发经验的,都知道怎么写,这里记录也是当做日常的积累了。
废话不多说,贴代码:
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="companyName"><span class="red">*</span>公司名称:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="companyName" id="companyName" class="col-xs-12 col-sm-6" value="<#if user ??>${user.companyName}</#if>">
<span class="help-inline col-xs-12 col-sm-4">
<@form.errors path="user.companyName"/>
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="customerId"><span class="red">*</span>公司编号:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="customerId" id="customerId" class="col-xs-12 col-sm-6" value="<#if user ??>${user.customerId}</#if>">
<span class="help-inline col-xs-12 col-sm-4">
<@form.errors path="user.customerId"/>
</span>
</div>
</div>
$("#companyName").blur(function(){
var name = $("#companyName").val() || '';
if(name == "特殊公司名称"){
$("#customerId").attr('value', '********');
$("#customerId").attr('readOnly',true);
}
});
实现的功能,就是当在公司名称一栏输入规定的特殊公司名称,然后鼠标移除焦点后,就会把公司编号一栏,设一个默认值,并修改为只读属性。