html表单验证(javascript表单验证)
大家好，今天小编来为大家解答html表单验证这个问题，javascript表单验证很多人还不知道，现在让我们一起来看看吧！
H5表单验证有哪些方法
这次给大家带来H5表单验证有哪些方法，H5表单验证的注意事项有哪些，下面就是实战案例，一起来看一下。
在深人探讨表单验证之前，让我们先思考一下表单验证的真实含义。就其核心而言，表单验证是一套系统，它为终端用户检测无效的控件数据并标记这些错误。换言之，表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。
但是真正的表单验证是什么？
是一种优化。
之所以说表单验证是一种优化，是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的。另一方面，设计表单验证是为了让Web应用更快地抛出错误。换句话说，最好利用浏览器内置的处理机制来告知用户网页内包含无效的表单控件值。过去，数据在网络上转一圈，仅仅是为了让服务器通知用户他输入了错误的数据。如果浏览器完全有能力让错误在离开客户端之前就被捕获到，那么我们应该利用这个优势。
不过，浏览器的表单检查还不足以处理所有的错误。
话虽如此，HTML5还是引入了八种用于验证表单控件的数据正确性的方法。让我们依次了解一下，不过先要介绍一下用于反馈验证状态的ValidityState对象。
在支持Html5表单验证的浏览器中，可以通过表单控件来访问ValidityState对象:
var valCheck= document.myForm.myInput.validity;这行代码获取了名为myInput的表单元素的ValidityState对象。对象包含了对所有八种验证状态的引用，以及最终验证结果。
调用方式如下：
valCheck.valid执行完毕，我们会得到一个布尔值，它表示表单控件是否已通过了所有的验证约束条件。可以把valid特性看做是最终验证结果：如果所有八个约束条件都通过了，valid特性就是true，否则，只要有一项约束没通过，valid标志都是false。
如前所述，任何表单元素都有八个可能的验证约束条件。每个条件在ValidityState对象中都有对应的特性名，可以用适当的方式访问。让我们逐一分析，看看它们是如何与表单控件关联的，以及如何基于ValidityState对象来对它们进行检查：
1、valueMissing
目的：确保表单控件中的值已填写。
用法：在表单控件中将required特性设置为true。
示例：
<input type="text" name="myText" required>详细说明：如果表单控件设置了required特性，那么在用户填写或者通过代码调用方式填值之前，控件会一直处于无效状态。例如，空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时，valueMissing会返回true。
2、typeMismatch
目的：保证控件值与预期类型相匹配(如numbe、email、URL等).
用法：指定表单控件的type特性值。
示例：
<input type="email" name="myEmail">详细说明：特殊的表单控件类型不只是用来定制手机键盘，如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则，比如email地址中没有@符号，或者number型控件的输入值不是有效的数字，那么浏览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况，typeMismatch将返回true。
3、patternMismatch
目的：根据表单控件上设置的格式规则验证输入是否为有效格式。
用法：在表单控件上设置pattern特性，井赋予适当的匹配规则。
示例：
<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">详细说明：pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后，只要输入控件的值不符合模式规则，patternMismatch就会返回true值。从引导用户和技术参考两方面考虑，你应该在包含pattern特性的表单控件中设置title特性以说明规则的作用。
4、tooLong
目的：避免输入值包含过多字符。
用法：在表单控件上设置maxLength特性。
示例：
<input type="text" name="limitedText" maxLength="140">详细说明：如果输入值的长度超过maxLength， tooLong特性会返回true。虽然表单控件通常会在用户输入时限制最大长度，但在有些情况下，如通过程序设置，还是会超出最大值。
5、rangeUnderflow
目的：限制数值型控件的最小值。
用法：为表单控件设置min特性，并赋予允许的最小值。
示例：
<input type="range" name="ageCheck" min="18">详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限。此时，ValidityState的rangeUnderflow特性将返回true。
6、rangeOverflow
目的：限制数值型控件的最大值。
用法：为表单控件设置max特性，并赋予允许的最大值。
示例：
<input type="range" name="kidAgeCheck" max="12">详细说明：与rangeUnderflow类似，如果一个表单控件的值比max更大，特性将返回true。
7、stepMismatch
目的：确保输入值符合min、max及step即设置。
用法：为表单控件设置step特性，指定数值的增量。
示例：
<input type="range" name="confidenceLevel" min="0" max="100" step="5">详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step特性值的倍数之和。例如，范围从0到100，step特性值为5，此时就不允许出现17，否则stepMismatch返回true值。
8、customError
目的：处理应用代码明确设置及计算产生的错误。
用法：调用setCustomValidity(message)将表单控件置于customError状态。
示例：
passwordConfirmationField.setCustomValidity("Password values do not match.");详细说明：浏览器内置的验证机制不适用时，需要显示自定义验证错误信息。当输入值不符合语义规则时，应用程序代码应设置这些自定义验证消息。
自定义验证消息的典型用例是验证控件中的值是否一致。例如，密码和密码确认两个输人框的值不匹配。只要定制了验证消息，控件就会处于无效状态，并且customError返回true。要清除错误，只需在控件上调用setCustomValidity("")即可。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
spring mvc+localResizeIMG实现H5端图片压缩上传
canvas与h5如何实现视频截图功能
带表单的javascript验证身份证号
其实就是加一个JS函数段吧。下面这段JS脚本是我用过的最完善的身份证号的验证程序了，因为只有真正的身份证号才能被通过，你可以试的。直接复制运行。
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Check card no</title>
<script type='text/javascript'>
/*
Author:yufulong
Blog:
*/
var vcity={ 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:"国外"
};
checktheform= function()
{
var card= document.getElementById('card_no').value;
//是否为空
if(card==='')
{
alert('请输入身份证号，身份证号不能为空');
document.getElementById('card_no').focus;
return false;
}
//校验长度，类型
if(isCardNo(card)=== false)
{
alert('您输入的身份证号码不正确，请重新输入');
document.getElementById('card_no').focus;
return false;
}
//检查省份
if(checkProvince(card)=== false)
{
alert('您输入的身份证号码不正确,请重新输入');
document.getElementById('card_no').focus;
return false;
}
//校验生日
if(checkBirthday(card)=== false)
{
alert('您输入的身份证号码生日不正确,请重新输入');
document.getElementById('card_no').focus();
return false;
}
//检验位的检测
if(checkParity(card)=== false)
{
alert('您的身份证校验位不正确,请重新输入');
document.getElementById('card_no').focus();
return false;
}
alert('OK');
return true;
};
//检查号码是否符合规范，包括长度，类型
isCardNo= function(card)
{
//身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
var reg=/(^\d{15}$)|(^\d{17}(\d|X)$)/;
if(reg.test(card)=== false)
{
return false;
}
return true;
};
//取身份证前两位,校验省份
checkProvince= function(card)
{
var province= card.substr(0,2);
if(vcity[province]== undefined)
{
return false;
}
return true;
};
//检查生日是否正确
checkBirthday= function(card)
{
var len= card.length;
//身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字
if(len=='15')
{
var re_fifteen=/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
var arr_data= card.match(re_fifteen);
var year= arr_data[2];
var month= arr_data[3];
var day= arr_data[4];
var birthday= new Date('19'+year+'/'+month+'/'+day);
return verifyBirthday('19'+year,month,day,birthday);
}
//身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X
if(len=='18')
{
var re_eighteen=/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
var arr_data= card.match(re_eighteen);
var year= arr_data[2];
var month= arr_data[3];
var day= arr_data[4];
var birthday= new Date(year+'/'+month+'/'+day);
return verifyBirthday(year,month,day,birthday);
}
return false;
};
//校验日期
verifyBirthday= function(year,month,day,birthday)
{
var now= new Date();
var now_year= now.getFullYear();
//年月日是否合理
if(birthday.getFullYear()== year&&(birthday.getMonth()+ 1)== month&& birthday.getDate()== day)
{
//判断年份的范围（3岁到100岁之间)
var time= now_year- year;
if(time>= 3&& time<= 100)
{
return true;
}
return false;
}
return false;
};
//校验位的检测
checkParity= function(card)
{
//15位转18位
card= changeFivteenToEighteen(card);
var len= card.length;
if(len=='18')
{
var arrInt= new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh= new Array('1','0','X','9','8','7','6','5','4','3','2');
var cardTemp= 0, i, valnum;
for(i= 0; i< 17; i++)
{
cardTemp+= card.substr(i, 1)* arrInt[i];
}
valnum= arrCh[cardTemp% 11];
if(valnum== card.substr(17, 1))
{
return true;
}
return false;
}
return false;
};
//15位转18位身份证号
changeFivteenToEighteen= function(card)
{
if(card.length=='15')
{
var arrInt= new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh= new Array('1','0','X','9','8','7','6','5','4','3','2');
var cardTemp= 0, i;
card= card.substr(0, 6)+'19'+ card.substr(6, card.length- 6);
for(i= 0; i< 17; i++)
{
cardTemp+= card.substr(i, 1)* arrInt[i];
}
card+= arrCh[cardTemp% 11];
return card;
}
return card;
};
</script>
</head>
<body>
<form name="form1" method="post" action="">
<label>身份证号
<input name='card_no' type='text' id='card_no' onBlur='javascript:checktheform();'/>
</label>
<label>
<input type="submit" name="Submit" value="提交">
</label>
</form></body>
</html>
html怎么添加验证码 验证码功能实现方法
在HTML中实现验证码功能需要结合后端语言（如PHP、Python等）和前端技术（如JavaScript）配合完成，以下是具体实现方法：
一、核心实现步骤后端生成验证码
生成随机字符串（含数字、字母或特殊字符）
使用图像处理库（如Python的Pillow库）将字符串绘制为图片
将验证码字符串存入服务器Session（确保用户唯一性）
返回图片格式（PNG/JPEG）给前端
前端展示验证码
在HTML表单中添加<img>标签，src指向后端验证码接口
添加<input type="text">用于用户输入
<form><img src="/generate_captcha.php" id="captcha_img"><input type="text" name="captcha" placeholder="请输入验证码"><button type="submit">提交</button></form>表单验证流程
用户提交时，将输入值发送到后端
后端从Session中取出原始验证码比对
返回验证结果（成功/失败）
二、关键技术细节验证码刷新机制
添加刷新按钮，通过JavaScript修改img.src
防止缓存：在URL后添加随机参数
function refreshCaptcha(){ const img= document.getElementById('captcha_img'); img.src='/generate_captcha.php?t='+ Math.random();}安全性增强方案
复杂度提升：增加字符集（如A-Z,a-z,0-9,!@#$%^&*）
干扰元素：添加噪点、扭曲变形或背景色
交互验证：采用滑动验证码或图形选择验证码
使用专业服务：集成Google reCAPTCHA等第三方方案
三、常见问题解决验证码不显示
检查后端是否返回正确Content-Type（如image/png）
确认img.src路径正确，无跨域问题
添加随机参数防止缓存：src="captcha.php?t=123"
验证失败原因
大小写敏感：明确提示用户是否区分大小写
空格干扰：前端或后端去除输入值首尾空格
Session问题：检查服务器Session配置
逻辑错误：确保后端正确比对Session中的验证码
防暴力破解
限制验证码尝试次数（如5次后锁定）
设置验证码有效期（通常3-5分钟）
对高频请求IP进行限流
四、完整代码示例后端（PHP示例）
<?phpsession_start();//生成随机字符串$chars='0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';$captcha= substr(str_shuffle($chars), 0, 6);//存入Session$_SESSION['captcha']=$captcha;//创建图片$image= imagecreatetruecolor(120, 40);$bgColor= imagecolorallocate($image, 240, 240, 240);$textColor= imagecolorallocate($image, 0, 0, 0);imagefilledrectangle($image, 0, 0, 120, 40,$bgColor);imagestring($image, 5, 30, 10,$captcha,$textColor);//输出图片header('Content-Type: image/png');imagepng($image);imagedestroy($image);?>前端（HTML+JS）
<!DOCTYPE html><html><head><title>验证码示例</title></head><body><form id="captchaForm"><img src="captcha.php" id="captchaImg" onclick="refreshCaptcha()"><input type="text" name="userCaptcha" placeholder="点击图片刷新"><button type="button" onclick="validateCaptcha()">验证</button></form><script> function refreshCaptcha(){ document.getElementById('captchaImg').src='captcha.php?t='+ Date.now();} function validateCaptcha(){//实际项目中通过AJAX提交到后端验证 alert('需将输入值发送到后端比对');}</script></body></html>五、进阶优化方向行为分析验证：通过鼠标轨迹、点击频率等行为特征判断是否为真人生物特征验证：集成指纹识别或人脸识别（需专业设备支持）无感验证：基于用户行为数据自动判断，无需显式输入验证码
实现验证码功能时，需平衡安全性与用户体验，建议根据实际场景选择合适方案。对于高安全需求场景，推荐使用专业验证码服务；对于普通场景，自行实现的简单验证码配合基础安全措施即可满足需求。
关于html表单验证的内容到此结束，希望对大家有所帮助。