<div>
<div>
<div>
您好，欢迎来到山水檀溪！ <a href="https://www.jb51.net/lpzx/LoginOut.aspx">
退出</a>
</div>
<div>
<a href="https://xyfc.s187.com/Block_index.aspx?blockId=3" target="_blank">进入楼盘首页</a></div>
</div>
</div>
<div>
<div>
<div>
<img src="https://img1.s187.com/Channels/House/xyfc.s187.com/BlockLogo/3/Block_Logo_3.png" />
</div>
<div>
<img src="https://img1.s187.com/Channels/House/xyfc.s187.com/BlockPropaganda/3/Block_XC_3.png" /></div>
</div>
<div>
<div>
<ul>
<li>
<a href='https://www.jb51.net/lpzx/BlockManager/BlockInfomation/Block_Detail.aspx'>
楼盘管理
</a></li>
<li >
<a href='https://www.jb51.net/lpzx/PurchaseIntention/PurchaseIntention_List.aspx'>
购房意向
</a></li>
<li >
<a href='https://www.jb51.net/lpzx/UsersProposal/BlockProposal.aspx'>
用户建议
</a></li>
<li >
<a href='https://www.jb51.net/lpzx/PasswordCenter/ModifyPassword.aspx'>
修改密码
</a></li>
<li >
<a href='https://www.jb51.net/lpzx/BlockManager/BlockDomainSet/SetBlockDominName.aspx'>
域名设置
</a></li>
<li >
<a href='https://www.jb51.net/lpzx/UsersQuestion/QAList.aspx'>
在线问答
</a></li>
</ul>
</div>
</div>
<div>
<div>
<div>
<ul>
<li><a href='https://www.jb51.net/lpzx/BlockManager/BlockInfomation/Block_Detail.aspx' >
楼盘信息
</a></li>
<li><a href='https://www.jb51.net/lpzx/BlockManager/BuildingInfomation/Building_List.aspx'>
栋号信息
</a></li>
<li><a href='https://www.jb51.net/lpzx/BlockManager/LayoutInfomation/Layout_List.aspx' >
户型信息
</a></li>
<li><a href='https://www.jb51.net/lpzx/BlockManager/RoomInfomation/Room_List.aspx' >
套房信息
</a></li>
<li><a href='https://www.jb51.net/lpzx/BlockManager/CustomerService/Customer_List.aspx' >
客服管理
</a></li>
<li><a href='https://www.jb51.net/lpzx/BlockManager/BlockNews/BlockNews_List.aspx' >
楼盘动态
</a></li>
<li><a href='https://www.jb51.net/lpzx/BlockManager/BlockProgress/BlockProgress_List.aspx' >
楼盘进度
</a></li>
<li><a href='https://www.jb51.net/lpzx/BlockManager/SalesLicense/LicenseManager.aspx' >
预售许可证
</a></li>
<li><a href='https://www.jb51.net/lpzx/BlockManager/Gallery/Block_Gallery.aspx' >
楼盘图库
</a></li>
</ul>
</div>
</div>
<div>
<div>
添加栋号 >> <span>第一步</span></div>
<div>
<img src="https://images.cnblogs.com/tje_03.png" alt="" /></div>
<div>
<div>
<div>
<label>
楼盘名称：
</label>
<span>
山水檀溪
</span>
</div>
<div>
<label>
<font color="#ff0000">* </font>栋号：
</label>
<span>
<input type="text" maxlength="10" />
</span>
<div>
<p>
</p>
</div>
</div>
<div>
<label>
<font color="#ff0000">* </font>状态：
</label>
<div>
<input type="radio" value="1" />
待售
<input type="radio" value="2" />
期房
<input type="radio" value="3" />
现房
<input type="radio" value="4" />
尾房
<input type="radio" value="5" />
售完
</div>
<div>
<p>
</p>
</div>
</div>
<div>
<label>
<font color="#ff0000">*</font> 用途：
</label>
<div>
<div>
<ul>
<li>
<input type="checkbox" value="1" />普通住宅</li>
<li>
<input type="checkbox" value="2" />单身公寓</li>
<li>
<input type="checkbox" value="3" />复式</li>
<li>
<input type="checkbox" value="4" />别墅</li>
<li>
<input type="checkbox" value="5" />厂房</li>
<li>
<input type="checkbox" value="6" />写字楼</li>
<li>
<input type="checkbox" value="7" />商铺</li>
<li>
<input type="checkbox" value="8" />经济适用房</li>
</ul>
</div>
</div>
<div>
<p>
</p>
</div>
</div>
<div>
<label>
预售许可证：
</label>
<div>
<select>
</select></div>
<div><p><a href="javascript:;">[查看内容]</a></p><p><ins>无</ins></p><p><a href="javascript:;"
title="如不存在此建筑物的预售许可证，可点击添加！">添加</a></p>
</div>
</div>
</div>
<div>
<label>
地理位置：
</label>
<div><p><a href="javascript:;">地图标注</a></p><p><ins></ins></p><p></p>
</div>
</div>
<div>
<label>
<font color="#ff0000">*</font> 层数：
</label>
<span>
<input maxlength="3" type="text" />
</span>
<div>
<p>
</p>
</div>
</div>
<div>
<label>
楼层说明：
</label>
<span>
<textarea cols="80" rows="5"></textarea>
</span>
</div>
<div>
<label>
公摊比率：
</label>
<div>
<input maxlength="10" type="text" />
</div>
<div>
<p>
</p>
</div>
</div>
<div>
<label>
位置说明：
</label>
<span>
<textarea cols="80" rows="5"></textarea>
</span>
</div>
<div>
<p>
<input type="button" value="下一步" /> <input
id="btnCancel_Step1" type="button" value="取 消" />
</p>
</div>
</div>
</div>
<div>
<div>
添加栋号 >> <span>第二步</span></div>
<div>
<img src="https://images.cnblogs.com/tj_03.png" /></div>
<div>
<div>
<div>
<label>
占地面积：
</label>
<div>
<input type="text" maxlength="6" />
(单位:平方米)</div>
<div>
<p>
</p>
</div>
</div>
<div>
<label>
建筑面积：
</label>
<div>
<input type="text" maxlength="6" />
(单位:平方米)</div>
<div>
<p>
</p>
</div>
</div>
<div>
<label>
电梯型号：
</label>
<span>
<input type="text" maxlength="10" />
例：东芝</span>
</div>
<div>
<label>
外墙装修：
</label>
<span>
<input type="text" maxlength="10" />
<kbd>例：高级面砖和涂料结合</kbd></span>
</div>
<div>
<label>
内墙装修：
</label>
<span>
<input type="text" maxlength="10" />
例：125/250厚加气混凝土砌块</span>
</div>
<div>
<label>
基础：
</label>
<span>
<input type="text" maxlength="15" />
例：管桩基础</span>
</div>
<div>
<label>
主体结构：
</label>
<span>
<input type="text" maxlength="25" />
例：框架剪力墙结构</span>
</div>
<div>
<p>
<input type="button" value="上一步" /> <input type="button" value="下一步" />
</p>
</div>
</div>
</div>
</div>
<div>
<div>
添加栋号 >> <span>第三步</span></div>
<div>
<img src="https://images.cnblogs.com/tjs_03.png" /></div>
<div>
<div>
<table cellspacing="0">
<tr>
<td>
栋号图片：
</td>
<td>
<span>(最多1张)</span><a href="javascript:;"><img src="https://images.cnblogs.com/aw_07.png" alt="" /></a>
</td>
<td>
<div>
<p>
</p>
</div>
</td>
</tr>
</table>
<div>
<div>
<div>
</div>
</div>
</div>
<div>
<input type="button" value="上一步" /> <input type="button" value="完 成" />
</div>
</div>
</div>
</div>
</div>
<div>
<img src="https://www.jb51.net/lpzx/images/fckj_27.png" alt="" />
</div>
</div>
<br />
<p></p>
<script src="https://www.jb51.net/js/formValidator.js" type="text/javascript"></script>
<script src="https://www.jb51.net/js/formValidatorRegex.js" type="text/javascript"></script>
<script type="text/javascript">
function GetInitConfigOptions(validatorgroup, onsuccess, submitbutton, getformdata) {
return {
validatorgroup: validatorgroup,
formid: "form1",
onerror: function (msg) { alert("onerror is " + msg) },
onsuccess: onsuccess,
submitbutton: submitbutton,
tipcss: {
//(ajax)加载处理
loadCss: "",
//获得焦点时的样式
focusCss: "",
//提示
noticeCss: "box001",
//成功
successCss: "box002",
//失败
errorCss: "box003",
//默认状态
defaultCss: "box004"
},
getformdata: getformdata
};
}
//显示指定的(步)容器
function _ShowStepContainer(showNum) {
for (var i = 1; i <= 3; i++) {
$("div#stepDiv" + i).css("display", (i == showNum ? "block" : "none"));
}
}
$(document).ready(function () {
$("p").show();
$.formValidator.initConfig(
GetInitConfigOptions(1, function () {
_ShowStepContainer(2);
}, "btnSubmit_Step1")
);
$("#txtBuildingName").formValidator(
{
validatorgroup: "1",
tipid: "tipBuildingName",
onshow: "请输入栋号",
onfocus: "栋号不能为空",
oncorrect: "",
tipcss: //此对象中的属性继承(extend)其对应的initConfig.tipcss的属性
{
//失败
//errorCss: "onNotice"
}
})
.inputValidator({ min: 2, max: 10, onerror: "你输入的栋号(长度错误),请确认" });
$("#txtfloornum").formValidator({ tipid: "tipfloornum", onshow: "请输入层数", onfocus: false, oncorrect: "层数输入正确" }).inputValidator({ min: 1, max: 30, type: "value", empty: { leftempty: false, rightempty: false, emptyerror: "层数两边不能有空符号" }, onerror: "层数不能为空,值介于1-30之间" })
.regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的层数格式不正确,必须为数字" });
$('input[name="rd_SaleState"]:radio').formValidator({ tipid: "tipSaleState", onshow: "请选择售楼状态", onfocus: "栋号的售楼状态", oncorrect: "" }).inputValidator({ min: 1, onerror: "售楼状态必选!" });
$('input[name="ckUsage"]:checkbox').formValidator({ tipid: "tipUsage", forcevalid: true, onshow: "请选择用途", onfocus: false, oncorrect: "用途已选择" }).inputValidator({ min: 1, onerror: "请选择用途,必填" });
$("#txtShareBili").formValidator({ tipid: "tipShareBili", onshow: "请输入公摊比率", oncorrect: "" }).inputValidator({ min: 1, onerror: "公摊比率不能为空" }).regexValidator({ regexp: RegexEnum.decmal_Z, onerror: "你输入的公摊比率格式不正确,必须为数字" });
$.formValidator.initConfig(
GetInitConfigOptions(2, function () {
_ShowStepContainer(3);
}, "btnSubmit_Step2")
);
$("#txtCoveredArea").formValidator({ validatorgroup: "2", tipid: "tipCoveredArea", onshow: "请输入占地面积", onfocus: false, oncorrect: "占地面积输入正确" }).inputValidator({ min: 1, onerror: "占地面积不能为空" })
.regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的占地面积格式不正确,必须为数字" });
$("#txtBuildingArea").formValidator({ validatorgroup: "2", tipid: "tipBuildingArea", onshow: "请输入建筑面积", onfocus: false, oncorrect: "建筑面积输入正确" }).inputValidator({ min: 1, onerror: "建筑面积不能为空" })
.regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的建筑面积格式不正确,必须为数字" });
$.formValidator.initConfig(
GetInitConfigOptions(3, function () {
alert("验证通过"); return true;
}, "btnSubmit_Step3", function (formdata) {
alert("要提交的表单值："+$.param(formdata));
for (var key in formdata) {
$("#showMes_P").html($("#showMes_P").html() + "<br/>key:" + key + " | val:" + formdata[key]);
}
})
);
});
</script>
上面就是我对此插件主要改进的介绍，插件整体还是保持原版本的结构和思想，所做的无非是让插件可读性和易用性等更好，今天分享出来，也是希望有更多的朋友能帮忙测试看看，提些自己的意见或想法，让这个表单验证插件formValidator能更好用(不断的改进才能做到更好，改进离不开大家的建议)！
补充：需要解决改进的功能——验证可支持自由组合，如：电话和手机 只用验证其中的一个通过即可. 这个我自己尝试实现过，但效果不理想，没有想到一个比较好的解决方法，希望大家能帮忙考虑下！
插件和Demo下载：FromVaild
您可能感兴趣的文章: