bootstrap实用校验功能
喻选
曾经做过的页面上的页面输入校验， 记录下来以后就不用再写第二次了，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;
}
类似资料：