12个常用的JS表单验证

长度限制

<form name="a" onsubmit="return test()">
<textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符！"></textarea>
<br />
<input type="submit" name="Submit" value="check">
</form>

<script language="javascript">
function test()
{
    if(document.a.b.value.length>50) {
        alert("不能超过50个字符！");
        document.a.b.focus();
        return false;
    }
}
</script>

只能是汉字

<input type="text" onblur="isChinese(this.value)" placeholder="请输入中文！" />
<script language="javascript">
function isChinese(obj){
    var reg=/^[\u0391-\uFFE5]+$/;
    if(obj!=""&&!reg.test(obj)){
    alert(‘必须输入中文！‘);
    return false;
}
}
</script>

只能是英文字母

<script type="text/javascript">
function checkZm(zm){
var zmReg=/^[a-zA-Z]*$/;
if(zm!=""&&!zmReg.test(zm)){
    alert("只能是英文字母！");
    return false;
}
}
</script>

只能是数字

<script language=javascript>
function checkNumber(obj){
var reg = /^[0-9]+$/;
if(obj!=""&&!reg.test(obj)){
    alert(‘只能输入数字！‘);
    return false;
}
}
</script>

只能是英文字母和数字

<script type="text/javascript">
function checkZmOrNum(zmnum){
    var zmnumReg=/^[0-9a-zA-Z]*$/;
    if(zmnum!=""&&!zmnumReg.test(zmnum)){
        alert("只能输入是字母或者数字,请重新输入");
        return false;
    }
}
</script>

检验时间大小(与当前时间比较)

<script type="text/javascript">
function checkDate(obj){
var obj_value=obj.replace(/-/g,"/");//替换字符，变成标准格式(检验格式为：‘2009-12-10‘)
//var obj_value=obj.replace("-","/");//替换字符，变成标准格式(检验格式为：‘2010-12-10 11:12‘)
var date1=new Date(Date.parse(obj_value));
var date2=new Date();//取今天的日期
if(date1>date2){
alert("不能大于当前时间！");
return false;
}
}
</script>

屏蔽关键字(这里屏蔽*和**)

<script type="text/javascript">
function test(obj) {
    if((obj.indexOf ("***") == 0) || (obj.indexOf ("****") == 0)){
        alert("屏蔽关键字(这里屏蔽***和****)！");
        return false;}
}
</script>

两次输入密码是否相同

<script type="text/javascript">
function check(){
with(document.all){
    if(input1.value!=input2.value){
        alert("密码不一致")
        input1.value = "";
        input2.value = "";
    }
    else {
        alert("密码一致");
        document.forms[0].submit();
    }
}
}
</script>

表单项不能为空

<script language="javascript">
function CheckForm(obj) {
if (obj.length == 0) {
alert("姓名不能为空!");
return false;
}
return true;
alert("姓名不能为空!");
}
</script>

邮箱验证

<script language="javascript">
function test(obj){
    var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(!myreg.test(obj)){
    alert(‘请输入有效的邮箱！‘);
    return false;
}
}
</script>

验证手机号

<script type="text/javascript">
function validatemobile(mobile){
    if(mobile.length==0){
        alert(‘手机号码不能为空！‘);
        return false;
    }
    if(mobile.length!=11){
        alert(‘请输入有效的手机号码，需是11位！‘);
        return false;
    }
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    if(!myreg.test(mobile)) {
        alert(‘请输入有效的手机号码！‘);
        return false;
    }
}
</script>

验证×××号码（需是有效×××）

<script type="text/javascript">
// 构造函数，变量为15位或者18位的×××号码
function clsIDCard(CardNo) {
this.Valid=false;
this.ID15=‘‘;
this.ID18=‘‘;
this.Local=‘‘;
if(CardNo!=null)this.SetCardNo(CardNo);
}

// 设置×××号码，15位或者18位
clsIDCard.prototype.SetCardNo = function(CardNo) {
this.ID15=‘‘;
this.ID18=‘‘;
this.Local=‘‘;
CardNo=CardNo.replace(" ","");
var strCardNo;
if(CardNo.length==18) {
pattern= /^\d{17}(\d|x|X)$/;
if (pattern.exec(CardNo)==null)return;
strCardNo=CardNo.toUpperCase();
} else {
pattern= /^\d{15}$/;
if (pattern.exec(CardNo)==null)return;
strCardNo=CardNo.substr(0,6)+‘19‘+CardNo.substr(6,9)
strCardNo+=this.GetVCode(strCardNo);
}
this.Valid=this.CheckValid(strCardNo);
}

// 校验×××有效性
clsIDCard.prototype.IsValid = function() {
return this.Valid;
}

// 返回生日字符串，格式如下，1981-10-10
clsIDCard.prototype.GetBirthDate = function() {
var BirthDate=‘‘;
if(this.Valid)BirthDate=this.GetBirthYear()+‘-‘+this.GetBirthMonth()+‘-‘+this.GetBirthDay();
return BirthDate;
}

// 返回生日中的年，格式如下，1981
clsIDCard.prototype.GetBirthYear = function() {
var BirthYear=‘‘;
if(this.Valid)BirthYear=this.ID18.substr(6,4);
return BirthYear;
}

// 返回生日中的月，格式如下，10
clsIDCard.prototype.GetBirthMonth = function() {
var BirthMonth=‘‘;
if(this.Valid)BirthMonth=this.ID18.substr(10,2);
if(BirthMonth.charAt(0)==‘0‘)BirthMonth=BirthMonth.charAt(1);
return BirthMonth;
}

// 返回生日中的日，格式如下，10
clsIDCard.prototype.GetBirthDay = function() {
var BirthDay=‘‘;
if(this.Valid)BirthDay=this.ID18.substr(12,2);
return BirthDay;
}

// 返回性别，1：男，0：女
clsIDCard.prototype.GetSex = function() {
var Sex=‘‘;
if(this.Valid)Sex=this.ID18.charAt(16)%2;
return Sex;
}

// 返回15位×××号码
clsIDCard.prototype.Get15 = function() {
var ID15=‘‘;
if(this.Valid)ID15=this.ID15;
return ID15;
}

// 返回18位×××号码
clsIDCard.prototype.Get18 = function() {
var ID18=‘‘;
if(this.Valid)ID18=this.ID18;
return ID18;
}

// 返回所在省，例如：上海市、浙江省
clsIDCard.prototype.GetLocal = function() {
var Local=‘‘;
if(this.Valid)Local=this.Local;
return Local;
}

clsIDCard.prototype.GetVCode = function(CardNo17) {
var Wi = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var Ai = new Array(‘1‘,‘0‘,‘X‘,‘9‘,‘8‘,‘7‘,‘6‘,‘5‘,‘4‘,‘3‘,‘2‘);
var cardNoSum = 0;
for (var i=0; i<CardNo17.length; i++)cardNoSum+=CardNo17.charAt(i)*Wi[i];
var seq = cardNoSum%11;
return Ai[seq];
}

clsIDCard.prototype.CheckValid = function(CardNo18) {
if(this.GetVCode(CardNo18.substr(0,17))!=CardNo18.charAt(17))return false;
if(!this.IsDate(CardNo18.substr(6,8)))return false;
var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
if(aCity[parseInt(CardNo18.substr(0,2))]==null)return false;
this.ID18=CardNo18;
this.ID15=CardNo18.substr(0,6)+CardNo18.substr(8,9);
this.Local=aCity[parseInt(CardNo18.substr(0,2))];
return true;
}

clsIDCard.prototype.IsDate = function(strDate) {
var r = strDate.match(/^(\d{1,4})(\d{1,2})(\d{1,2})$/);
if(r==null)return false;
var d= new Date(r[1], r[2]-1, r[3]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[2]&&d.getDate()==r[3]);
}

function valiIdCard(idCard){
var checkFlag = new clsIDCard(idCard);
if (!checkFlag.IsValid()) {
alert("输入的×××号无效,请输入真实的×××号！");
document.getElementByIdx("idCard").focus();
return false;
}else{
alert("是有效×××！");
}
}
</script>

原文地址：https://blog.51cto.com/9161018/2360675

时间： 2024-08-28 06:42:48

12个常用的JS表单验证的相关文章

JS表单验证-12个常用的JS表单验证

最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6

/** * 验证时间 * @param dataValue 格式为:YYYY-MM-DD * @returns 匹配返回true 不匹配返回false */ function valiDate(dateValue){ var result = dateValue.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3})

js表单验证工具包

常用的js表单验证方法大全 1 /* 2 非空校验 : isNull() 3 是否是数字: isNumber(field) 4 trim函数: trim() lTrim() rTrim() 5 校验字符串是否为空: checkIsNotEmpty(str) 6 校验字符串是否为整型: checkIsInteger(str) 7 校验整型最小值: checkIntegerMinValue(str,val) 8 校验整型最大值: checkIntegerMaxValue(str,val) 9 校验整

jquery.validation.js 表单验证

jquery.validation.js 表单验证官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

angular js 表单验证

1 <!doctype html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 padding: 50px; 9 font-family: "微软雅黑"; 10 } 11 input{ 12 margi

Jquery.validate.js表单验证插件的使用

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q

JS表单验证示例

1 </<!DOCTYPE html> 2 <html> 3 <head> 4 <title>JS表单验证</title> 5 <meta http-equiv = "content-type" content="text/html; charset = utf-8 "> 6 <link rel="stylesheet" href="JSlogin.cs

JS表单验证类HTML代码实例

以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个字符验证. 中文非空验证.大于10小于100的数字.浮点数验证.日期验证.邮件检查.网址验证.固定电话和手机号码验证.IP地址验证.邮编和QQ号码验证. MSN和身份证验证等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

简单的JS表单验证效果代码

简单的JS表单验证代码:表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://w