validform绑定事件
// 引用 <script type="text/javascript" src="js/Validform_v5.3.2_min.js"></script> // jsp代码 <form class="healthForm" action="" method="post"> <div> <div class="ps_center_hang"> <input type="hidden" name="clientInfo.id" value="${clientId}"/> <b>姓 名：</b> <input type="text" size="12" class="ps_center_input_bd" name="clientInfo.name" value="${clientInfo.name}"/> <b>性别：</b> <s:radio list='#{ "0":"男","1":"女"}' name="clientInfo.gender" value="clientInfo.gender" /> <span style="padding-left:90px;"> <b> 出生日期：</b> <!--<span id="birthday"></span>--> <input type="text" name="clientInfo.birthday" id="sDate" class="ps_center_input_bd" value='<fmt:formatDate value="${clientInfo.birthday}" pattern="yyyy-MM-dd"/>' onclick="" readonly="readonly"/> </span> </div> <div class="ps_center_hang"> <b>身份证号：</b> <input type="text" size="30" class="ps_center_input_bd" name="clientInfo.idCards" value="${clientInfo.idCards}"/> <span style="padding-left:60px;"><b> 籍 贯：</b> <span id="birthPlace"></span> </span> </div> <div class="ps_center_hang"> <b>常 住 地：</b> <input type="text" size="30" class="ps_center_input_bd" name="clientInfo.usualAddress" value="${clientInfo.usualAddress}"/> <span style="padding-left:60px;"> <b> 民 族：</b> <input type="text" size="30" class="ps_center_input_bd" name="clientInfo.ethnic" value="${clientInfo.ethnic}"/> </span> </div> <div class="ps_center_hang"> <b>信 仰：</b> <input type="text" size="85" class="ps_center_input_bd" name="clientInfo.faith" value="${clientInfo.faith}"/> </div> <div class="ps_center_hang"> <b>血 型：</b> <s:radio list='#{ "1":"A","2":"B","3":"O","4":"AB","5":"不详"}' name="clientInfo.bloodType" value="clientInfo.bloodType" /> <span style="padding-left:150px;"><b>RH阴性：</b> <s:radio list='#{ "1":"是","2":"否","3":"不详"}' name="clientInfo.rh" value="clientInfo.rh" /> </span> </div> <div class="ps_center_hang"> <b>文化程度：</b> <s:radio list='#{ "1":"小学以下","2":"小学","3":"初中","4":"高中 / 中专","5":"本科 / 大专 ","6":"研究生以上"}' name="clientInfo.culture" value="clientInfo.culture" /> </div> <div class="ps_center_hang"> <b>职 业：</b> <s:checkboxlist name="professions" list="#{'1':'工人','2':'干部','3':'科技','4':'金融','5':'商业','6':'教师','7':'医生','8':'学生','9':'家务','10':'退休','11':'待业','12':'其他'}" listKey="key" listValue="value"></s:checkboxlist> </div> <div class="ps_center_hang"> <b>收 入：</b> （元/月）<s:radio list="#{'1':'小于1000','2':'1000-2000','3':'2000-3000','4':'3000-4500','5':'4500-6000','6':'6000-10000','7':'大于10000'}" name="clientInfo.income" value="clientInfo.income"></s:radio> </div> <div class="ps_center_hang"> <b>婚 姻：</b> <s:radio list="#{'1':'未婚','2':'已婚','3':'丧偶','4':'离异','5':'其他'}" name="clientInfo.marriage" value="clientInfo.marriage"></s:radio> </div> <div class="ps_center_hang"> <b>工作单位：</b> <input type="text" size="28" class="ps_center_input_bd" name="clientInfo.workUnits" value="${clientInfo.workUnits}"/> <b>职 务：</b> <input type="text" size="10" class="ps_center_input_bd" name="clientInfo.duty" value="${clientInfo.duty}"/> <b>单位电话：</b> <input type="text" size="10" class="ps_center_input_bd" name="clientInfo.unitsPhone" value="${clientInfo.unitsPhone}"/> </div> <div class="ps_center_hang"> <b>住 址：</b> <input type="text" size="28" class="ps_center_input_bd" name="clientInfo.address" value="${clientInfo.address}"/> <b>住址电话：</b> <input type="text" size="10" class="ps_center_input_bd" name="clientInfo.phone" value="${clientInfo.phone}"/> <b>手机号码：</b> <input readonly="readonly" type="text" size="10" class="ps_center_input_bd" name="clientInfo.mobile" value="${clientInfo.mobile}"/> </div> <div class="ps_center_hang"> <b>医疗费用负担形式：</b> <s:radio list="#{'1':'公费','2':'社会保障','3':'自费','4':'其他'}" name="clientInfo.medicalExpenses" value="clientInfo.medicalExpenses"></s:radio> </div> </div> <div class="clear"></div> <input type="button" value="保存" class="ps_center_button" id="saveHealth"/> </form>
// js代码 $(function () { validate();// 加载，也可以点击时触发 }) /** * 表单验证 */ function validate() { $.Tipmsg.r = null; var showmsg = function (msg) { alert(msg); } var laf = $(".healthForm").Validform({ btnSubmit : "#saveHealth", tiptype : function (msg) {// tiptype可以为1、2 和 自定义函数 showmsg(msg);// 弹框消息 }, tipSweep : true, postonce : true }); // 自定义判断类型 $.extend( $.Datatype, { "s0-64" : function (val) {// 0-64位任意字符 if ("" != val) { var pattern = /^[\w\W]{0,64}$/; if (!pattern.test(val)) { return false; } } }, "email" : function (val) {// 判断格式 if ("" != val) { var pattern = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if (!pattern.test(val)) { return false; } } }, "s0-32" : function (val) {// 0-32位任意字符 if ("" != val) { var pattern = /^[\w\W]{0,32}$/; if (!pattern.test(val)) { return false; } } }, "s0-255" : function (val) {// 长度验证 if ("" != val) { var pattern = val.length; if (pattern > 225) { return false; } } }, "idCards" : function (val) {// 身份证验证 if ("" != val) { var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if (!pattern.test(val)) { return false; } } }, "phones" : function (val) {// 手机号验证 if ("" != val) { var pattern = /(^[0-9]{3,4}[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/; if (!pattern.test(val)) { return false; } } }, "sex" : function () {// 性别验证 var l = $(":input[name='clientInfo.gender']:checked").length; if (l <= 0) { return false; } }, "birthday" : function () { var y = $(":input[name='clientInfo.birthday']").val(); if ("" == y || null == y) { return false; } } }); laf.addRule([{ ele : ":input[name='clientInfo.clientCode']",// 绑定input标签，或用#xx datatype : "s0-64", nullmsg : "不能为空",// 空验证，内容自定义 errormsg : "用户居民健康档案编码最大长度为64"// 错误验证 }, { ele : ":input[name='clientInfo.name']", datatype : "s0-64", nullmsg : "不能为空",// 空验证，内容自定义 errormsg : "用户名称最大长度为64"// 错误验证 }, { ele : ":input[name='clientInfo.gender']", datatype : "sex", nullmsg : "用户性别不能为空", errormsg : "" }, { ele : ":input[name='clientInfo.birthday']", datatype : "birthday", nullmsg : "用户出生年月日不能为空哦!", errormsg : "" }, { ele : ":input[name='clientInfo.email']", datatype : "email", errormsg : "用户邮箱输入有误" }, { ele : ":input[name='clientInfo.ethnic']", datatype : "s0-32", errormsg : "用户民族最大长度为32" }, { ele : ":input[name='clientInfo.faith']", datatype : "s0-255", errormsg : "用户信仰最大长度为225" }, { ele : ":input[name='clientInfo.idCards']", datatype : "idCards", errormsg : "用户身份证号码输入有误" }, { ele : ":input[name='clientInfo.usualAddress']", datatype : "s0-255", errormsg : "用户常住地最大长度为225" }, { ele : ":input[name='clientInfo.workUnits']", datatype : "s0-255", errormsg : "用户工作单位最大长度为225" }, { ele : ":input[name='clientInfo.duty']", datatype : "s0-64", errormsg : "用户职务最大长度为64" }, { ele : ":input[name='clientInfo.address']", datatype : "s0-255", errormsg : "用户住址最大长度为225" }, { ele : ":input[name='clientInfo.phone']", datatype : "phones", errormsg : "用户住址号码输入有误" }, { ele : ":input[name='clientInfo.unitsPhone']", datatype : "phones", errormsg : "用户单位号码输入有误" } ]); }
加群QQ226728216