JavaScript 表单验证

时间 2019-11-13

标签 javascript 表单验证栏目 JavaScript 繁體版

原文原文链接

客户端验证优势：javascript

•当用户输入错误数据时，页面不须要从新加载，能够保持用户输入的数据状态，因此不要再一次输入全部数据，只输入错误数据便可。html

•减轻了服务器端通讯压力java

•使得用户界面响应更加迅速数组

缺点：安全

•JavaScript不能做为惟一的验证方法(JavaScript可能不可用，甚至可能被故意关闭以阻止进行验证)。服务器

•这可能会产生这样一个错觉，验证输入数据是很是简单的过程。其实不是这样，并且它对产品的安全性和可用性都是很是关键的。spa

字符串经常使用方法：code

•charAt(n) ：返回字符串中第n个位置的字符，从0开始。orm

•charCodeAt(n) ：返回字符串中第n个位置字符的ASCII值，第一个位置为0。htm

•indexOf(search) ：返回search在主字符串中的位置，若是没有则返回-1。

•lastIndexOf(search) ：返回search在主字符串中的最后位置，没有则返回-1。

•slice(start, end) ：返回start和end之间的字符串，若是没有提供end则返回从start开始全部的字符串。

•split(search) ：将字符串分割成数组，数组元素为search周围的字符串，search自己不包含在数组中。

•substr(start, n) ：将从start开始的n个字符做为字符串返回。

•substring(start, end) ：返回start和end之间的字符串。

数字验证：

•Number() ：将括号内的值转换为数字。

•isNaN(n) ：检验n是否为数字(整数或者浮点型)。

•parseInt() ：将字符串转换为整数(只转换从左侧第一位开始的数字值，非数字值不作转换，若第一位既为非数字值，返回NaN)。

•parsetFloat() ：将字符串转换为浮点数(转换方式与parseInt相似)。

练习：使用字符串经常使用方法验证一个字符串是否为邮件格式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	function check(){
		var mail=document.getElementById('email').value;
		if(mail == '' || mail == null){
			alert('不能为空');
			return false;
		}
		if(mail.indexOf('@') != -1 && mail.substr(0,1) == '@' || mail.indexOf('@') != mail.lastIndexOf('@')){
			alert('@不对');
			return false;
		}
		if(mail.indexOf('.') == -1 || mail.indexOf('.') == mail.length-1 || mail.indexOf('.') <= mail.indexOf('@')+1 || mail.lastIndexOf('.') == mail.length-1){
			alert('.不对');
			return false;
		}
		return true;
	}
	</script>
</head>
<body>
	<form action="">
		<input type="text" name="youjian" id="email">
		<input type="submit" onclick=" return check()">
	</form>
</body>
</html>