EasyUi身份证验证

var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}

function isCardID(sId){
var iSum=0 ;
var info="" ;
if(!/^\d{17}(\d|x)$/i.test(sId)) return "你输入的身份证长度或格式错误";
sId=sId.replace(/x$/i,"a");
if(aCity[parseInt(sId.substr(0,2))]==null) return "你的身份证地区非法";
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/")) ;
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "身份证上的出生日期非法";
for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) ;
if(iSum!=1) return "你输入的身份证号非法";
return true;//aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}


$.extend($.fn.validatebox.defaults.rules, {   
    idcared: {   
        validator: function(value,param){  
    var flag= isCardID(value);
            return flag==true?true:false;  
        },   
        message: '不是有效的身份证号码'  
     
});


       
data-options="required:true,missingMessage:'请输入用户名',validType:'idcared'"/>      

### Vue 中使用 EasyUI 进行表单验证 在 Vue 项目中集成 EasyUI 并实现表单验证,需要遵循以下原则。首先,确保已正确安装和配置 EasyUI 庢库[^1]。其次,在 Vue 组件中初始化 EasyUI 的表单验证功能,并结合 Vue 的数据绑定机制完成动态验证逻辑。 以下是具体实现代码示例: ```vue <template> <div id="app"> <form id="myForm" method="post"> <div> <label for="username">用户名:</label> <input class="easyui-validatebox" type="text" id="username" name="username" data-options="required:true,missingMessage:'请输入用户名'" /> </div> <div> <label for="password">密码:</label> <input class="easyui-validatebox" type="password" id="password" name="password" data-options="required:true,validType:'length[6,20]',missingMessage:'请输入密码',invalidMessage:'密码长度应为6-20位'" /> </div> <div> <button type="button" @click="submitForm">提交</button> </div> </form> </div> </template> <script> export default { name: "App", methods: { submitForm() { // 调用 EasyUI 的 validate 方法进行表单验证 if ($("#myForm").form("validate")) { console.log("表单验证通过"); // 执行表单提交或其他操作 } else { console.log("表单验证失败"); } } }, mounted() { // 确保 EasyUI 在组件挂载后正确初始化 $(".easyui-validatebox").validatebox(); } }; </script> <style> /* 可选样式 */ .easyui-validatebox-invalid { border-color: red; } </style> ``` #### 说明 1. **EasyUI 表单验证**:通过为输入框添加 `class="easyui-validatebox"` 和 `data-options` 属性,可以定义验证规则,例如必填项、长度限制等[^2]。 2. **Vue 数据绑定与方法调用**:通过 Vue 的 `@click` 事件绑定 `submitForm` 方法,在方法中调用 EasyUI 提供的 `form("validate")` 方法完成表单验证逻辑[^3]。 3. **样式自定义**:可以通过 CSS 自定义验证失败时的样式,如红色边框等[^4]。 ### 注意事项 - 确保项目中正确引入了 EasyUI 的 CSS 和 JS 文件。 - 如果使用的是 Vue CLI 或其他构建工具,请确保将 EasyUI 的静态资源正确打包到项目中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值