javascript 常用校验代码

最新推荐文章于 2021-06-30 09:40:26 发布

调皮的芋头

最新推荐文章于 2021-06-30 09:40:26 发布

阅读量232

点赞数

分类专栏： javascript java web 文章标签： javascript 自定义方法 js校验检查表单校验参数 ViewUI

java web 同时被 2 个专栏收录

237 篇文章

订阅专栏

javascript

140 篇文章

订阅专栏

本文分享了一系列实用的JavaScript代码片段，用于实现表单验证功能，包括校验表单字段是否为空、检查文件上传状态、确保输入为数字或正整数等。这些技巧有助于提升前端表单验证的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript会经常被用于校验表单,比如校验用户名是否为空等.

我总结了常用的校验代码

(1)上传商品时检查商品参数(名称,价格)是否为空

var products={};
products.checkAdd=function()
{
	/*if(!com.whuang.hsj.isRadioChecked22(com.whuang.hsj.$$arr("productItemclassId"))){
		alert("请选择产品大类别.");
		return false;
	}
	var selectObj=com.whuang.hsj.$$one("smallClass.id");
	if((!selectObj)||selectObj==undefined){
		alert("请先选择产品大类别. ");
		return false;
	}
	if(!com.whuang.hsj.isSelectedOption(selectObj)){
		alert("请选择产品小类别. ");
		return false;
	}
	
	*/
	var itemname=com.whuang.hsj.$$one("itemname");
                if(itemname && itemname!=undefined){
                if(!com.whuang.hsj.isHasValue(itemname.value)){
                        itemname.focus();
                        alert("请填写产品名称.");
                        return false;
                }
	}
	var price=com.whuang.hsj.$$one("price");
	if(price && price!=undefined){
                if(!com.whuang.hsj.isHasValue(price.value)){
                        price.focus();
                        alert("请填写产品价格.");
                        return false;
                }	
	}
	
	var inventoryAmounts=com.whuang.hsj.$$one("inventoryAmounts");
	if(inventoryAmounts && inventoryAmounts!=undefined){
                if(!com.whuang.hsj.isHasValue(inventoryAmounts.value)){
                        inventoryAmounts.focus();
                        alert("请填写产品库存数量.");
                        return false;
                }
	}
	var productionCycle=com.whuang.hsj.$$one("productionCycle");
	if(productionCycle && productionCycle!=undefined){
                if(!com.whuang.hsj.isHasValue(productionCycle.value)){
                        productionCycle.focus();
                        alert("请填写产品制作周期.");
                        return false;
                }
	}
	
	var picPath=com.whuang.hsj.$$one("picPath");
	if(picPath && picPath!=undefined){
                if(!com.whuang.hsj.isHasValue(picPath.value)){
                        picPath.focus();
                        alert("请上传产品图片.");
                        return false;
                }
	}

	
	return true;
};

(2)上传文件时检查是否选择了文件

function checkUpload() {
	var uploadFile = com.whuang.hsj.$$one("image223");
	if(uploadFile && uploadFile!=undefined){
	if (com.whuang.hsj.isHasValue(uploadFile.value)) {
		return true;
	} else {
		alert("Please specify file to upload.");
		return false;
	}
}
}

(3)在线留言时校验是否填写完成

var ajaxSubmitMessage=function()
{
   
    var username22=com.whuang.hsj.$$one("username");
 
    var companyObj=com.whuang.hsj.$$one("company");
    if(!com.whuang.hsj.checkNullValue(companyObj,'leaveMessageResult','请填写您的单位名称.')){
        return ;
    }
    if(!com.whuang.hsj.checkNullValue(username22,'leaveMessageResult','请填写您的姓名.')){
    	return ;
    }
    
    var phoneObj=com.whuang.hsj.$$one("email");
    if(!com.whuang.hsj.checkNullValue(phoneObj,'leaveMessageResult','请填写您的电话.')){
        return ;
    }

    var object22=com.whuang.hsj.$$one("object");
    if(!com.whuang.hsj.checkNullValue(object22,'leaveMessageResult','请填写留言主题.')){
    	return ;
    }
    
    var content22=com.whuang.hsj.$$one("content");
    if(!com.whuang.hsj.checkNullValue(content22,'leaveMessageResult','请填写留言内容.')){
    	return ;
    }
    if(content22.value.length<10){
    	com.whuang.hsj.setErrorMessage(content22,"leaveMessageResult","你的留言内容太短了.");
    	return;
    }
    
    if(content22.value.length>5000){
    	com.whuang.hsj.setErrorMessage(content22,"leaveMessageResult","你的留言内容太长了.");
    	return;
    }
    
	var options = {
			   url: "<%=path%>/message/save",
			   type: "POST",
			   dataType:'json',
			   success:function(html) {
				   //清空表单
				   com.whuang.hsj.$$id("resetId").click();
				   var leaveMessageResultSpan=com.whuang.hsj.$$id("leaveMessageResult");
				   leaveMessageResultSpan.innerHTML="<span class='successMessageBig' >留言成功,感谢您的支持!</span>";
				   function cleanUp22(){
					   leaveMessageResultSpan.innerHTML="";
					}
					setTimeout(cleanUp22,4000);

				   //alert("留言成功,感谢您的支持!");
			   },
			   error:function(er){
				   //functionChange(er.responseText);
			   }
	};
	//var options = ajaxOption();
	//采用Ajax 提交表单,页面不会跳转
	$('#leaveMessageForm').ajaxSubmit(options);	
}

(4)页面加载完成之后,文本框自动聚焦

window.onload=function(){
    var company22=com.whuang.hsj.$$one("company");
    company22.focus();
}

window.onload=function(){
        var title22=com.whuang.hsj.$$one("title");
 		if(title22){
        	title22.focus();
		}
    }

(5)以ajax的方式登录

function ajaxLogin(){
	var usernameObj=com.whuang.hsj.$$one('username');
	var passwordObj=com.whuang.hsj.$$one('password');
var loginResultSpan=com.whuang.hsj.$$id("loginResult");
	if(!com.whuang.hsj.isHasValue( usernameObj.value)){
		com.whuang.hsj.setErrorMessage(usernameObj,loginResultSpan,'请填写用户名.',false);
		return false;
	}

		var password_value='';
	if(passwordObj.value.trim)
	{
         password_value=passwordObj.value.trim();
	} else {
         password_value=com.whuang.hsj.trim(passwordObj.value);
	}
	if(!com.whuang.hsj.isHasValue( password_value)){
		// passwordObj.focus();
		// li_info_id.innerHTML="<span class='errormessage'> 请填写密码.</span>";
		// function cleanUp22(){
		// 	li_info_id.innerHTML="";
		// }
		// setTimeout(cleanUp22,4000);
		com.whuang.hsj.setErrorMessage(passwordObj,loginResultSpan,'请填写密码.',false);
		passwordObj.value='';
		return false;
	}
	if(password_value.length<=20)
	{
		passwordObj.value=calcMD5(password_value);
	} else {
		com.whuang.hsj.setErrorMessage(passwordObj,loginResultSpan,'密码过长',false);
		passwordObj.value='';
		return false;
	}


	var abc44=function (obj) {
	//	alert(obj);
		var jsonObj2=eval("("+obj+")");
		
		// alert(obj)

		var loginResult=jsonObj2.result;
		if(loginResult=='failed'){
			
			com.whuang.hsj.setErrorMessage(usernameObj,loginResultSpan,jsonObj2.error,false);
			passwordObj.value='';
		}else{
			location.href="<%=path%>/orders/list";
		}
		

	};
	
	var url2="<%=path%>/index/login";
	//alert(url2);
	var xmlhw5=new XMLHttpHuangWei(url2, "username="+usernameObj.value+"&password="+passwordObj.value,abc44);
	xmlhw5.XMLGetMethod();
}

(6)判断是否是正整数

/***
* whether is Integer,1.2 is not allowed
*/
com.whuang.hsj.isInteger=function(int22){
	if(!int22 || int22==undefined){
		return false;
	}
	if( int22.match(/^[\d]+$/i)){ 
    return true;
  }else{
    return false;
  }
};

应用:

var qrcodeSizeObj=com.whuang.hsj.$$id('qrcodeSize');
	var qrcodeSizeint=qrcodeSizeObj.value;
	if(!com.whuang.hsj.isHasValue(qrcodeSizeint)){
		qrcodeSizeObj.focus();
		alert('请输入像素大小.');
		return ;
	}
	var isDigit=com.whuang.hsj.isInteger(qrcodeSizeint);
	if(!isDigit){
		qrcodeSizeObj.focus();
		alert('请输入数字[100-1000]');
		return;
	}

(7)判断是否是数字(可以有小数点)

/***
* whether is digit,1.2 is allowed
*/
com.whuang.hsj.isNumber=function(int22){
	if(!int22 || int22==undefined){
		return false;
	}
	if( int22.match(/^[\d\\.]+$/i)){ 
    return true;
  }else{
    return false;
  }
};

(8)判断字符是否包含空格

var isContainBlank=function(val)
{
  return /\s/g.test(val);
}

console.log(isContainBlank(' '));
console.log(isContainBlank('a  '));
console.log(isContainBlank('b '));
console.log(isContainBlank(' c'));
console.log(isContainBlank('a c'));
console.log(isContainBlank(' b c '));
console.log(isContainBlank('aaaa       a'));
console.log(isContainBlank('a'));
console.log(isContainBlank('       a'));

上述代码中的自定义方法见附件