表单验证

最新推荐文章于 2025-03-16 22:58:12 发布

Kathy_LLi

最新推荐文章于 2025-03-16 22:58:12 发布

阅读量426

点赞数

本文链接：https://blog.youkuaiyun.com/Kathy_Hui/article/details/84525268

版权

本文深入解析了一段用于网页表单验证的JavaScript脚本，包括姓名、联系方式、身份证号等字段的验证逻辑，以及图片上传和金额输入的检查方法。通过对各种常见输入格式的正则表达式匹配，确保了数据的准确性和安全性。

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

// 验证姓名
function nameValidate(valCon) {
var checkResult = true;

var valCon1 = $.trim(valCon.val());// 去空

var regular = /[^\u4E00-\u9FA5]/g;

valCon.css('border-color','#FA8072');

if( valCon1 =="") {
checkResult = false;
} else if (regular.test(valCon1)) { // 判断输入是否包含为数字
checkResult = false;
} else if (valCon1.length < 2) {
checkResult = false;
} else {
valCon.css('border-color','#c7c7c7');
checkResult = true;
}

return checkResult;
}

// 检查联系方式
function phoneValidate(valCon) {
var checkResult = true;

var valCon1 = $.trim(valCon.val());// 去空

var regular = /^[1][3,4,5,7,8][0-9]{9}$/;

valCon.css('border-color','#FA8072');

if( valCon1 =="") {
checkResult = false;
} else if (!regular.test(valCon1)) { // 判断输入是否包含为数字
checkResult = false;
} else {
valCon.css('border-color','#c7c7c7');
checkResult = true;
}
return checkResult;
}

// 检查身份证号码
function isCardNoValidate(valCon) {
var checkResult = true;

var valCon1 = $.trim(valCon.val());// 去空

var regular = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

valCon.css('border-color','#FA8072');

if( valCon1 =="") {
checkResult = false;
} else if (!regular.test(valCon1)) {
checkResult = false;
} else {
valCon.css('border-color','#c7c7c7');
checkResult = true;
}
return checkResult;
}

// 是否为空限制20个字符
function emptyValidate(valCon) {
var checkResult = true;

var valCon1 = $.trim(valCon.val());// 去空

valCon.css('border-color','#FA8072');
if( valCon1 =="") {
checkResult = false;
} else if (valCon1.length > 20) {
checkResult = false;
} else {
valCon.css('border-color','#c7c7c7');
checkResult = true;
}

return checkResult;
}
// 是否为空限制100个字符
function hundredValidate(valCon) {
var checkResult = true;

var valCon1 = $.trim(valCon.val());// 去空

valCon.css('border-color','#FA8072');
if( valCon1 =="") {
checkResult = false;
} else if (valCon1.length > 100) {
checkResult = false;
} else {
valCon.css('border-color','#c7c7c7');
checkResult = true;
}

return checkResult;
}

// 是否为空，不限制长度
function emptyUrlValidate(valCon) {
var checkResult = true;

var valCon1 = $.trim(valCon.val());// 去空

valCon.css('border-color','#FA8072');
if( valCon1 =="") {
checkResult = false;
} else {
valCon.css('border-color','#c7c7c7');
checkResult = true;
}
return checkResult;
}

// 单张选择图片
var singleList={};
function single(file) {
var className = file.id;

if (file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
// 存数据
singleList[className] = file.files;
$(file).parent().find(".volunteerImg").html("<img class='head_img' src='"+evt.target.result+"'>");
}
reader.readAsDataURL(file.files[0]);
}
}

// 验证图片
function imgValidate(valCon) {

// 获取当前样式名称
var valName = valCon[0].id;

var checkResult = true;

valCon.parent().parent().css('border-color','#FA8072');
valCon.parent().find(".positive-img").css('color','#FA8072');

if (singleList[valName]) {

valCon.parent().parent().css('border-color','#cfcfcf');
valCon.parent().find(".positive-img").css('color','#cfcfcf');
checkResult = true;

}else{
checkResult = false;
}
return checkResult;
}

//验证金额
function moneyValidate(valCon) {
var checkResult = true;
var valCon1 = $.trim(valCon.val());// 去空
var regular = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
valCon.css('border-color','#FA8072');
if( valCon1 =="") {
checkResult = false;
} else if (!regular.test(valCon1)) {
checkResult = false;
} else {
valCon.css('border-color','#d9d9d9');
checkResult = true;
}
return checkResult;
}

// 判断只能输入数字
function digitalValidate(valCon) {
var checkResult = true;
var valCon1 = $.trim(valCon.val());// 去空
var regular = /(^[0-9]*$)/;
valCon.css('border-color','#FA8072');
if( valCon1 =="") {
checkResult = false;
} else if (!regular.test(valCon1)) {
checkResult = false;
} else {
valCon.css('border-color','#d9d9d9');
checkResult = true;
}
return checkResult;
}

// 是否富文本为空
function ueditorValidate(valCon) {
var checkResult = true;

var valCon1 = UE.getEditor('editor').getContent();// 去空

valCon.find("#edui1").css('border-color','#FA8072');
if( valCon1 =="") {
checkResult = false;
}else {
valCon.find("#edui1").css('border-color','#c7c7c7');
checkResult = true;
}

return checkResult;
}

// 长度限制
function lengthValidate(valCon) {
var checkResult = true;

var valCon1 = $.trim(valCon.val());// 去空

valCon.css('border-color','#FA8072');
if( valCon1 =="") {
checkResult = false;
} else if (valCon1.length > 200) {
checkResult = false;
} else {
valCon.css('border-color','#c7c7c7');
checkResult = true;
}

return checkResult;
}

//在需要用到的页面调用

// 离开的时候
function toShowReg() {
// 检查名称
$(".类名").focus(function(){
$(this).addClass("focus");
});
$(".类名").blur(function(){
var valCon = $(this);
emptyValidate(valCon);
$(this).removeClass("focus");
});
}