/*表单验证
调用1 validate_form('form'): 调用验证 form为表单form ID
调用2 validate_form('form',1): 调用验证 form为表单form ID 1 表示提交表单
<input type="text" value="" name="name" id="name" mod="ismobile" msg="不正确">
<input type="text" value="" name="name" id="name" mod="isempty|ismobile" msg="不能为空不正确|必须为手机">
<input type="text" value="" name="name" id="name" mod="isnumeral|ismobile" msg="" len="5-12">
*/
;(function($){
var conf = {
"isemail": {
msg: '邮箱地址格式不正确',
reg: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
},
"ismobile": {
msg: '手机号码不正确',
reg: /^1(3\d{1}|5[389])\d{8}$/
},
"isidentity": {
msg: '证件格式不正确',
reg: /^(d){5,18}$/
},
"isempty": {
msg: '该字段不能为空',
reg: /./
},
"isnumeral": {
msg: '必须为数字',
reg: /[\d]+$/
}
};
//计算汉字长度
function str_len(str) {
var charset = document.charset;
var len = 0;
for(var i = 0; i < str.length; i++) {
len += str.charCodeAt(i) < 0 || str.charCodeAt(i) > 255 ? (charset == "utf-8" ? 3 : 2) : 1;
}
return len;
}
//验证有没有弹出信息 cmsg 配置信息, msg 自定义信息
function validate_msg(cmsg,msg)
{
if(typeof(msg) != 'undefined' && msg!='')
{
return msg;
}else
{
return cmsg;
}
}
//验证是否有isempty 字段,如果没有并且值为空不验证
function validate_mod(mod,v)
{
if(mod.indexOf('isempty')==-1 && v=='')
{
return false;
}else
{
return true;
}
}
//验证长度
function validate_length(len,v)
{
var num = str_len(v);
if(typeof(len) == 'undefined') return true;
var l = parseInt(len.split('-')[0],10);
var r = parseInt(len.split('-')[1],10);
if(num < l || num > r) return false;
return true;
}
//根据不同模式类型做处理 返回验证结果 v 值
function mod_deal(input,mod,msg,v,len)
{
var result = true;
if(!validate_length(len,v))
{
alert(validate_msg('长度应为'+len+'位',msg));
input.focus();
return false;
}
switch(mod)
{
case '':
break;
default:
if(typeof(conf[mod]) != 'undefined')
{
if(!conf[mod].reg.test(v))
{
alert(validate_msg(conf[mod].msg,msg));
input.focus();
result = false;
}
}
}
return result;
}
//处理验证
function validate_start(obj)
{
var mod = obj.attr('mod');
var value = obj.val();
var msg = obj.attr('msg');
var len = obj.attr('len');
if(!validate_mod(mod,value))
{
return false;
}
msg = typeof(msg) != 'undefined'?msg:'';
var mods = mod.split('|');//用竖线分割操作
var msgs = msg.split('|');//有竖线分割信息
for(var i=0;i<mods.length;i++)
{
if(!mod_deal(obj,mods[i],msgs[i],value,len))
{
return false;
}
}
return true;
}
//验证
function validate(objs)
{
var result = true;
objs.each(function(){
result = validate_start($(this));
if(!result)
{
return false;
}
});
return result;
}
//验证 input
function validate_input(id)
{
var objs = $("#"+id+" input[mod]");
return validate(objs);
}
//验证select
function validate_select(id)
{
var objs = $("#"+id+" select[mod]");
return validate(objs);
}
window['validate_form'] = function(id , type)
{
var submit = validate_input(id);
if(submit){submit = validate_select(id);}
if(type==1 && submit)
{
$('#'+id).submit();
}
return submit;
}
})(jQuery);
分享到:
相关推荐
本资源集合了全网最全面的JavaScript表单验证方法,覆盖了从基础到高级的各种验证场景。 首先,让我们详细探讨一下`js表单验证`。JavaScript是一种在客户端运行的脚本语言,它可以在用户填写表单时实时检查输入,...
"JavaScript常见问题整理.txt"、"表单验证大全.txt"、"JavaScript表单验证控制代码大全.txt"、"JavaScript验证表单函数大全.txt"这些文件将提供更具体的信息和示例代码,帮助深入理解和掌握这一主题。
javascript很好很强大的JS表单验证 javascript很好很强大的JS表单验证
以上都是简单的JavaScript表单验证实例,它们可以单独使用,也可以结合到更复杂的表单验证系统中。在实际开发中,通常会使用更高级的库如jQuery或现代框架如React、Vue等,结合表单验证库(如Formik、Vuelidate等)...
总的来说,JavaScript表单验证代码库提供了一套完整的解决方案,帮助开发者轻松实现对用户输入的验证,提升网站或应用的用户体验和数据质量。开发者在实际使用时,需要根据项目需求选择合适的验证规则,配置错误提示...
本文将深入探讨"javascript表单验证方式一",介绍如何利用JavaScript进行表单验证,确保用户输入的数据符合预设规则,提高用户体验,同时也减轻了服务器端的压力。 首先,表单验证的基本目标是检查用户在HTML表单中...
js表单验证 表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上。 Validator是基于...
总的来说,"javascript表单验证器三方库.zip" 提供了一个强大的工具,用于处理JavaScript表单验证,它具有可配置性、递归数据验证等特性,是开发高效、健壮的Web应用的重要辅助工具。无论是初学者还是经验丰富的...
"一个完美的js表单验证案例"利用JavaScript(特别是jQuery库)实现了这一功能,提供了高效、用户友好的验证机制。 JavaScript作为客户端脚本语言,可以直接在用户的浏览器上运行,这使得表单验证可以实时进行,减少...
JavaScript(简称JS)是网页开发中用于实现客户端交互和数据验证的重要工具,特别是在表单验证方面。表单验证是确保用户输入数据有效性和安全性的关键步骤,可以减少服务器端的压力,提升用户体验,防止无效或恶意的...
首先,我们需要理解JavaScript表单验证的基本概念。表单是HTML中的一个元素,用于收集用户输入。而验证则是检查这些输入是否符合预设的规则,如非空、邮箱格式、电话号码格式等。JavaScript可以通过监听表单的submit...
JavaScript表单验证是提高网页交互性和数据质量的关键步骤。通过学习和实践上述方法,你可以创建出更安全、更友好的表单。但要注意,前端验证不能完全替代后端验证,因为恶意用户可能绕过前端限制,所以后端验证同样...
本文将详细介绍基于jQuery的JS表单验证程序,探讨其特点、功能以及如何使用。 一、jQuery与JS表单验证 jQuery是一款流行的JavaScript库,它简化了JavaScript的DOM操作,动画效果以及事件处理。在表单验证中,...
二、JavaScript表单验证基础 1. DOM操作:在JS中,我们可以通过Document Object Model (DOM)来访问和修改HTML元素,包括表单元素。例如,获取表单元素值,设置提示信息等。 2. 事件监听:利用addEventListener等方法...
超强大的JS表单验证及使用方法教程: 真实姓名只允许中文; 英文名只允许英文字母; 非法的Url; 密码不符合安全规则; 两次输入的密码不一致; 信箱格式不正确; QQ号码不存在; 身份证号码不正确; 电话号码不正确...
"通用的JS表单验证"这个主题聚焦于如何利用JavaScript来确保用户在网页表单中输入的数据符合预设的规则,从而提高数据质量和用户体验。下面我们将深入探讨这个话题。 首先,表单验证是网页开发中的关键部分,它能...
JavaScript表单验证工具是Web开发中的重要组成部分,主要用于在用户提交数据前检查输入是否符合预设规则,确保数据的有效性和安全性。在这个项目中,开发者花费了三天时间编写了一个JavaScript库,专注于表单验证...
1. **JavaScript表单验证**:在客户端进行表单验证可以提高用户体验,因为数据在提交服务器前就能得到即时反馈。JavaScript允许开发者添加自定义验证逻辑,例如检查邮箱格式、手机号码合法性等。 2. **轻量级框架**...
js表单验证实例,HTML文件,javascript常用表单验证: 账号、密码、身份证等