`
jickcai
  • 浏览: 246769 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 表单验证

阅读更多

/*表单验证

调用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);

分享到:
评论

相关推荐

    js表单验证 全网最全的 表单验证

    本资源集合了全网最全面的JavaScript表单验证方法,覆盖了从基础到高级的各种验证场景。 首先,让我们详细探讨一下`js表单验证`。JavaScript是一种在客户端运行的脚本语言,它可以在用户填写表单时实时检查输入,...

    JS表单验证与JS常见问题解决方案

    "JavaScript常见问题整理.txt"、"表单验证大全.txt"、"JavaScript表单验证控制代码大全.txt"、"JavaScript验证表单函数大全.txt"这些文件将提供更具体的信息和示例代码,帮助深入理解和掌握这一主题。

    javascript很好很强大的JS表单验证

    javascript很好很强大的JS表单验证 javascript很好很强大的JS表单验证

    简单js表单验证大全

    以上都是简单的JavaScript表单验证实例,它们可以单独使用,也可以结合到更复杂的表单验证系统中。在实际开发中,通常会使用更高级的库如jQuery或现代框架如React、Vue等,结合表单验证库(如Formik、Vuelidate等)...

    js表单验证代码 很全很强大

    总的来说,JavaScript表单验证代码库提供了一套完整的解决方案,帮助开发者轻松实现对用户输入的验证,提升网站或应用的用户体验和数据质量。开发者在实际使用时,需要根据项目需求选择合适的验证规则,配置错误提示...

    javascript表单验证方式一

    本文将深入探讨"javascript表单验证方式一",介绍如何利用JavaScript进行表单验证,确保用户输入的数据符合预设规则,提高用户体验,同时也减轻了服务器端的压力。 首先,表单验证的基本目标是检查用户在HTML表单中...

    js表单验证 表单验证类 整合

    js表单验证 表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上。 Validator是基于...

    javascript表单验证器三方库.zip

    总的来说,"javascript表单验证器三方库.zip" 提供了一个强大的工具,用于处理JavaScript表单验证,它具有可配置性、递归数据验证等特性,是开发高效、健壮的Web应用的重要辅助工具。无论是初学者还是经验丰富的...

    一个完美的js表单验证案例

    "一个完美的js表单验证案例"利用JavaScript(特别是jQuery库)实现了这一功能,提供了高效、用户友好的验证机制。 JavaScript作为客户端脚本语言,可以直接在用户的浏览器上运行,这使得表单验证可以实时进行,减少...

    js表单验证

    JavaScript(简称JS)是网页开发中用于实现客户端交互和数据验证的重要工具,特别是在表单验证方面。表单验证是确保用户输入数据有效性和安全性的关键步骤,可以减少服务器端的压力,提升用户体验,防止无效或恶意的...

    js 表单验证网页特效

    首先,我们需要理解JavaScript表单验证的基本概念。表单是HTML中的一个元素,用于收集用户输入。而验证则是检查这些输入是否符合预设的规则,如非空、邮箱格式、电话号码格式等。JavaScript可以通过监听表单的submit...

    js表单验证(简单)

    JavaScript表单验证是提高网页交互性和数据质量的关键步骤。通过学习和实践上述方法,你可以创建出更安全、更友好的表单。但要注意,前端验证不能完全替代后端验证,因为恶意用户可能绕过前端限制,所以后端验证同样...

    超好用的JS表单验证,效果好

    本文将详细介绍基于jQuery的JS表单验证程序,探讨其特点、功能以及如何使用。 一、jQuery与JS表单验证 jQuery是一款流行的JavaScript库,它简化了JavaScript的DOM操作,动画效果以及事件处理。在表单验证中,...

    全面的js表单验证包含正则表达式还有本人写的表单验证

    二、JavaScript表单验证基础 1. DOM操作:在JS中,我们可以通过Document Object Model (DOM)来访问和修改HTML元素,包括表单元素。例如,获取表单元素值,设置提示信息等。 2. 事件监听:利用addEventListener等方法...

    超强大的JS表单验证及使用方法教程

    超强大的JS表单验证及使用方法教程: 真实姓名只允许中文; 英文名只允许英文字母; 非法的Url; 密码不符合安全规则; 两次输入的密码不一致; 信箱格式不正确; QQ号码不存在; 身份证号码不正确; 电话号码不正确...

    通用的JS表单验证

    "通用的JS表单验证"这个主题聚焦于如何利用JavaScript来确保用户在网页表单中输入的数据符合预设的规则,从而提高数据质量和用户体验。下面我们将深入探讨这个话题。 首先,表单验证是网页开发中的关键部分,它能...

    js表单验证工具

    JavaScript表单验证工具是Web开发中的重要组成部分,主要用于在用户提交数据前检查输入是否符合预设规则,确保数据的有效性和安全性。在这个项目中,开发者花费了三天时间编写了一个JavaScript库,专注于表单验证...

    简单且强大的js表单验证框架

    1. **JavaScript表单验证**:在客户端进行表单验证可以提高用户体验,因为数据在提交服务器前就能得到即时反馈。JavaScript允许开发者添加自定义验证逻辑,例如检查邮箱格式、手机号码合法性等。 2. **轻量级框架**...

    js表单验证实例,HTML文件,javascript常用表单验证

    js表单验证实例,HTML文件,javascript常用表单验证: 账号、密码、身份证等

Global site tag (gtag.js) - Google Analytics