js 表单验证方式

简介: 引用:http://www.iteye.com/topic/1117665   // 在GBK编码里,除了ASCII字符,其它都占两个字符宽 function get_bytes_length(str) { return str.

引用:http://www.iteye.com/topic/1117665

 

// 在GBK编码里,除了ASCII字符,其它都占两个字符宽

function get_bytes_length(str) {

return str.replace(/[^\x00-\xff]/g, "xx").length;

}

 

//去除所有空格

function trim(obj) {

var not_valid = /\s/;

while (not_valid.test(obj)) {

obj = obj.replace(not_valid, "");

}

return obj;

}

 

//只能输入数字、字母、下划线

function nlu(obj) {

var valid = /^\w*$/;

return (valid.test(obj));

}

 

 

 

 

//普通验证(obj:要验证的输入框的id;maxsize:可输入最大字符长度;isNull:是否为必填项)

function check_obj1(obj, maxsize, isNull) {

//获取输入框值

var v = document.getElementById(obj).value;

//是必填项

if (isNull) {

if (v == "") {

document.getElementById("vd_" + obj).innerText = "不能空!";

return false;

}

}

//超过指定长度

if (get_bytes_length(trim(v)) > maxsize) {

document.getElementById("vd_" + obj).innerText = "\u53ea\u80fd\u8f93\u5165" + (maxsize / 2) +"\u4f4d\u4ee5\u5185\u7684\u4e2d\u6587\u6216" + maxsize + "\u4f4d\u4ee5\u5185\u82f1\u6587\u5b57\u7b26!";

return false;

}

if(isNull){

document.getElementById("vd_" + obj).innerText = "*";

return true;

}else{

document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

return true;

}

}

 

//验证数字(obj:要验证的输入框的id;maxsize:可输入最大字符长度;isNull:是否为必填项;isNumber:是否只能输入数字)

function check_obj2(obj, maxsize, isNull, isNumber) {

//获取输入框值

var v = document.getElementById(obj).value;

//是必填项

if (isNull) {

if (v == "") {

document.getElementById("vd_" + obj).innerText = "不能空!";

return false;

}

}

//超过指定长度

if (get_bytes_length(trim(v)) > maxsize) {

document.getElementById("vd_" + obj).innerText = "\u6700\u591a\u8f93\u5165" + maxsize + "\u4e2a\u6570\u5b57!";

return false;

}

//只能是数字

if (isNumber) {

if (isNaN(v)) {

document.getElementById("vd_" + obj).innerText = "\u53ea\u80fd\u8f93\u5165\u6570\u5b57!";

return false;

}

}

 

if(isNull){

document.getElementById("vd_" + obj).innerText = "*";

return true;

}else{

document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

return true;

}

}

 

//验证数字、字母、下划线(obj:要验证的输入框的id;maxsize:可输入最大字符长度;isNull:是否为必填项;isNLU:是否为数字、字母、下划线)

function check_obj3(obj, maxsize, isNull, isNLU) {

//获取输入框值

var v = document.getElementById(obj).value;

//是必填项

if (isNull) {

if (v == "") {

document.getElementById("vd_" + obj).innerText = "\u4e0d\u80fd\u4e3a\u7a7a!";

return false;

}

}

//超过指定长度

if (get_bytes_length(trim(v)) > maxsize) {

document.getElementById("vd_" + obj).innerText = "\u53ea\u80fd\u8f93\u5165" + (maxsize / 2) +"\u4f4d\u4ee5\u5185\u7684\u4e2d\u6587\u6216" + maxsize + "\u4f4d\u4ee5\u5185\u82f1\u6587\u5b57\u7b26!";

return false;

}

//只能是数字、字母、下划线

if (isNLU) {

if (!nlu(v)) {

document.getElementById("vd_" + obj).innerText ="\u53ea\u80fd\u8f93\u5165\u6570\u5b57\u3001\u5b57\u6bcd\u3001\u4e0b\u5212\u7ebf!";

return false;

}

}

if(isNull){

document.getElementById("vd_" + obj).innerText = "*";

return true;

}else{

document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

return true;

}

}

 

//电话验证(obj:要验证的输入框的id;maxsize:可输入最大字符长度;isNull:是否为必填项)

function check_obj4(obj, maxsize, isNull) {

//获取输入框值

var v = document.getElementById(obj).value;

//是必填项

if (isNull) {

if (v == "") {

document.getElementById("vd_" + obj).innerText = "\u4e0d\u80fd\u4e3a\u7a7a!";

return false;

}

}

var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;

if(!reg.test(v)){

document.getElementById("vd_" + obj).innerText = "格式错误!";

return false;

}

//超过指定长度

if (get_bytes_length(trim(v)) > maxsize) {

document.getElementById("vd_" + obj).innerText = "\u53ea\u80fd\u8f93\u5165" + (maxsize / 2) +"\u4f4d\u4ee5\u5185\u7684\u4e2d\u6587\u6216" + maxsize + "\u4f4d\u4ee5\u5185\u82f1\u6587\u5b57\u7b26!";

return false;

}

if(isNull){

document.getElementById("vd_" + obj).innerText = "*";

return true;

}else{

document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

return true;

}

}

 

 

//验证小数点(obj:要验证的输入框的id;maxsize:可输入最大字符长度;isNull:是否为必填项;floatsize:小数点后长度;)

function check_obj5(obj, maxsize,isNull,floatsize) {

//获取输入框值

var v = document.getElementById(obj).value;

 

//是必填项

if (isNull) {

if (v == "") {

document.getElementById("vd_" + obj).innerText = "\u4e0d\u80fd\u4e3a\u7a7a!";

return false;

}

}

 

var counts=0;//是否有小数点

var j,c;

for(j=0;j<v.length;j++){

c=v.charAt(j)

if(( c >= '0' && c <= '9')||( c == ".")){

if(c=='.'){

counts++;

}

}else{

   document.getElementById("vd_" + obj).innerText = "只能输入数字和小数点!";

   return false;

}

}

if(counts>=1){//存在小数点

if(counts==1){//只有一个小数点时

if(isNaN(v.substring(0,(maxsize-floatsize)))){

document.getElementById("vd_" + obj).innerText = "小数点前面只能为数字!";

   return false;

}else if(v.substring(0,v.indexOf('.')).length>(maxsize-floatsize)){

   document.getElementById("vd_" + obj).innerText = "小数点前面只能为"+(maxsize-floatsize)+"位数字!";

   return false;

}else if(v.substring(v.indexOf('.')+1).length>floatsize){

document.getElementById("vd_" + obj).innerText = "小数点后面只能为"+floatsize+"位数字!";

   return false;

}else if(v.length>(maxsize+1)){

document.getElementById("vd_" + obj).innerText = "长度超过范围!";

return false;

}else{

if(isNull){//必填项显示星号

document.getElementById("vd_" + obj).innerText = "*";

return true;

}else{//否则显示输入正确

document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

return true;

}

}

}else{//存在多个小数点时

document.getElementById("vd_" + obj).innerText = "小数点多了!";

return false;

}

}else{//不存在小数点

if(v.length>(maxsize-floatsize)){

document.getElementById("vd_" + obj).innerText = "小数点前面只能为" + (maxsize-floatsize) + "位数字!";

return false;

}else{

if(isNull){//必填项显示星号

document.getElementById("vd_" + obj).innerText = "*";

return true;

}else{//否则显示输入正确

document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

return true;

}

}

}

}

 

//密码验证

function obj1_equals_obj2(obj1,obj2){

var v1 = document.getElementById(obj1).value;

var v2 = document.getElementById(obj2).value;

if(v1!=v2){

document.getElementById("vd_" + obj2).innerText = "两次密码不一致!";

 return false;

}else{

document.getElementById("vd_" + obj2).innerText = "*";

return true;

}

}

 
 
 
用法举例:
//客户名称
$("#customerId").keyup(function validate_customerId(){
  return check_obj1("customerId",6,true);
});
 
//本次合计应付款额
$("#mustpay").keyup(function validate_mustpay(){
   return check_obj5("mustpay",16,true,2);
});
 
 
 
////////////////////////////////批量验证//////////////////////////////////
$(function validate_detail(){
var false_count=0; //记录不合法数据数量
 
//委托单号
$("input[title='委托单号']").each(function(i){
$("#deliverscatbill"+(i+1)).keyup(function validate_capPlancontactH(){
return check_obj1("deliverscatbill"+(i+1),20,true);
});
if(!validate_capPlancontactH()){
false_count=false_count+1;
}
});
 
//车号
$("input[title='车号']").each(function(i){
$("#vehicleId"+(i+1)).keyup(function validate_vehicleId(){
return check_obj1("vehicleId"+(i+1),10,true);
});
if(!validate_vehicleId()){
false_count=false_count+1;
}
});
 
//应付运费
$("input[name='cdItem.mustpay']").each(function(i){
$("#mustpay"+(i+1)).keyup(function validate_mustpay(){
return check_obj5("mustpay"+(i+1),16,true,2);
});
if(!validate_mustpay()){
false_count=false_count+1;
}
});
 
if(false_count>0){ //只要存在不合法数据就返回假,否则返回真
return false;
}else{
return true;
}
});

 

相关文章
|
9月前
|
JavaScript 前端开发
JavaScript事件监听、常见事件及表单验证
JavaScript事件监听、常见事件及表单验证
88 0
|
5月前
|
JavaScript 前端开发
JavaScript 表单验证
JavaScript 表单验证
24 9
|
5月前
|
JavaScript 前端开发
js登录注册简单tab切换页面(含前台表单验证)
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的登录注册页面,并实现Tab切换效果。包括了表单验证,点击登录或注册按钮时,可以切换显示相应的表单。同时提供了完整的前端代码和实现效果图。
|
6月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
89 0
|
9月前
|
前端开发 JavaScript UED
使用JavaScript实现表单验证
使用JavaScript实现表单验证
|
7月前
|
移动开发 前端开发 JavaScript
|
JavaScript 前端开发
原生JavaScript之dom添加表单验证
原生JavaScript之dom添加表单验证
67 2
原生JavaScript之dom添加表单验证
|
9月前
|
移动开发 JavaScript 前端开发
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
150 0
|
9月前
|
前端开发 JavaScript API
创建强大的网页表单验证器:使用JavaScript
创建强大的网页表单验证器:使用JavaScript
|
9月前
|
JavaScript 前端开发 安全
使用JavaScript实现动态表单验证(下)
使用JavaScript实现动态表单验证

热门文章

最新文章