bootstrap实用校验功能

喻选
2023-12-01

曾经做过的页面上的页面输入校验, 记录下来以后就不用再写第二次了,c来直接用。。

1.特殊字符校验
2.ip规则校验
3.起止时间检查
4.字符串转大/小写
5.联动其他输入框必填(动态红色星号标记)
6.清除下拉选项
7.文件上传
8.是否为空(必填)
9.打印页面填写信息(用于再次确认)
10.判断是否被勾选
11.判断是否隐藏属性
12.input限制4位小数(可指定精度)
13.手机,邮箱格式校验
14.密码含有三种字符
15. from表单是否空

校验特殊字符

function ValidateSpecialCharacter(){
            var code;
            if(document.all) { //是否IE浏览器
                code = window.event.keyCode;
            }else{
                code = arguments.callee.caller.arguments[0].which;
            }
            var character = String.fromCharCode(code);
            var text=new RegExp("[ ,\\`,\\!,\\%,\\_,\\\\,\\/,\\?,\\'',\\;,\\=,\"]");
            if(text.test(character)){
                if(document.all){
                    window.event.returnValue = false;
                }else{
                    arguments.callee.caller.arguments[0].preventDefault();
                }
            }
        }

// 方法二
// 不能含有特殊字符
function checkSpecialKey(str) {
  var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~!#¥……&*()——|{}【】‘;:”“'。,、?]‘'"; 
  for (var i = 0; i < str.length; i++) {
    if (specialKey.indexOf(str.substr(i, 1)) != -1) {
      return false;
    }
  }
  return true;
}

ip规则校验
支持多个ip一起校验,用|拼接

function checkIPFmt(ipstr) {                     
	var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
	var ipArry = ipstr.split("|");
	for (var i = 0 ; i < ipArry.length; i++) {
		if (!reg.test(ipArry[i])) {
			console.info('错误ip= ' + ipArry[i]);
			return false;
		}
	}	
	return true;   
}

时间自动填充当前时间(yyyy-MM-dd格式)

function CurentTime() {
	var myDate = new Date(); //当前时间
	var m = (myDate.getMonth() + 1) < 10 ? ("0" + (myDate.getMonth() + 1)) : (myDate.getMonth() + 1); // 月(前面自动补0)
	var d = myDate.getDate() < 10 ? ("0" + myDate.getDate()) : myDate.getDate(); // 日(前面自动补0)
	$("#beg_dt").attr("value", myDate.getFullYear() + "-" + m + "-" + d);
	$("#end_dt").attr("value", myDate.getFullYear() + "-" + m + "-" + d);
}

起止时间检查
先去掉横杠,然后比较8位纯数据大小

function checkTimeRange() {
	var beg_dt=$("#beg_dt").val().replace(/-/, "");
	var end_dt=$("#end_dt").val().replace(/-/, "");            
	if(end_dt < beg_dt){
		alert("开始日期不能在结束日期之后"); 
		return ;
	}
}

字符串转大/小写

var str=str.toUpperCase();//将字符串转为大写
var str1=str1.toLetterCase();//将字符串转为小写

input标签约束:

仅数字字母 onkeyup="value=value.replace(/[\W^_]/g,'')"
仅数字 onkeyup="value=value.replace(/[^\d]/g,'')"   
仅数字和小数点 onkeyup="value=value.replace(/[^\d^\.]+/g,'')"
$('#yourId').prop('disabled', true); // 按钮灰掉,且不可点击(pop/attr均可)

下拉选择后联动其他输入框是否必填(即输入框前加星号)
下拉选择的onchange触发下面js

if($("#id").val() =='2'){                
	document.getElementById("id2").innerHTML="*";
}else{                
	document.getElementById("id2").innerHTML="";
}

清除下拉选项

$("#sex option").remove(); // 移除原有的全部的选择
$("#sex").append("<option value=''>--请选择性别--</option>");  // 新增一个选项(可循环多次加多个选项)

文件上传

<input class="" type="file" accept="image/jpg"  id="logo" name="file" value=""/>

function uploadLogoImage(){
	 var logo = document.getElementById("logo").files[0];
	 var FileName= logo.name;
	 if(FileName == null || FileName == ""){
		 alert("请选择要上传的文件");
		 return false;
	 }
	 if (!FileName.match(/.jpg/i)) {
		  alert("仅支持jpg格式!"); 
		  return false;
	 }
	 if (logo.size / (750*500) > 3){
	   alert("图片大小最大为3M!");
	   return false;
	 }
	 
	 var formData = new FormData();
	 formData.append("file", logo);
	 var settings = {
	   "url": "localhost/api/upload?type=1",
	   "method": "POST",
	   "processData": false,
	   "mimeType": "multipart/form-data",
	   "contentType": false,
	   "data":formData 
	 };
	 $.ajax(settings).done(function (response) {
		  alert("上传成功");
		  var res= eval("("+response+")"); //包数据解析为json 格式    
		  $("#logo_id").attr("value",res.result.fileId); // 上传成功后返回的数据放页面上
		  $("#logoModal").modal('hide');	// 上传页面隐藏	  
	});
}

是否为空(必填)

var name = $("#img_file_url"+index).val();
if(name == "" || name == undefined|| name == null){
	altert("姓名必填");
	return false;
}

打印页面填写信息(用于再次确认)

<div class="user-div">
	<div class="user-preview">
		<div class="user-name1">姓名:<span class="user-name">王五</span></div>
		<div class="user-mbl">手机号:<span class="mbl">15544443322</span></div>		
	</div>
</div>


function printUserInfo() {
	var name = $(".user-name").text();
	var mbl = $(".mbl").text();

	if(name == ''||mbl == '') {
		var msg = '信息未填写完,'; 
		if(name == ''){
			msg += '姓名,';
		}             
		if(mbl == ''){
			msg += '手机号,';
		}
		Messenger().post({
			singleton : true,
			message : msg +"请去填写!"
		});
	}else{
		var old = document.body.innerHTML;
		var newPage = $(".user-div").html(); // <!-- 把第一个div里面的内容全部取出来  --> 
		document.body.innerHTML = "<html><head><title></title></head><body>" + newPage + "</body>";
		window.print();
		window.location.reload();
		document.body.innerHTML = old;
	}
}

判断是否被勾选

if ($("#yourId").is(":checked")) {
	alert("因为被勾选而触发!");
}

判断是否被隐藏

var display =$('#yuorId').css('display');
if(display == 'none'){  // 等于 block 时表示是显示的
	alert("我是隐藏的!");
}
// 下面的方法也可以实现
$("#yuorId").is(":hidden"){ // visible 表示是显示的
	alert("我是隐藏的!");
};

input限制4位小数

<input type="text" class="form-control" id="reg_amt" name="reg_amt"  maxlength="13" onkeyup="justNum(this,4)" required>

function justNum(obj,scale) {
    if (typeof (scale) == undefined) {
        scale="2";
    }
    obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
    obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字而不是其他字符
    obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 不能输入连续的.
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//清除后面的.
    var re = new RegExp("^(\\-)*(\\d+)\\.(\\d{" + scale + "}).*$");
    obj.value = obj.value.replace(re, '$1$2.$3'); //只能输入scale个小数
}

手机,邮箱格式校验

var mobile = $("#mobile").val();
var regexp =  /^1\d{10}$/; // 只校验1开头,后面还有10位数字
// var myreg=/^[1][3,4,5,7,8][0-9]{9}$/; // 校验号段,号段哪天更新了这里也要加上新号段
if (!regexp.test(mobile)) {
	Messenger().post("手机号格式不正确!");
	return false;
}

<input type="email" name="email" id="email" placeholder="请输入邮箱">

密码含有三种字符

var reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{8,64}$/;
if(reg.test(password)) {
    Messenger().post("密码需含数字字母特殊字符三种");return false;
}

from表单是否空

if ($("#updForm").validate().form() != true) {
	Messenger().post("有必输项未输!");
	 return;
}
 类似资料: