JavaScript综合 注册案例

项目目标效果图

JavaScript综合 注册案例_第1张图片

表单验证

1、用户名:一般由数字,字母,下划线组成
2、手机号:一般是11位的阿拉伯数字
3、数据有效性验证的2个途径:
(1) Html4时期,通过js脚本验证一些表单元素;
(2) Html5中,有些表单控件自带一些验证属性
JavaScript综合 注册案例_第2张图片

总结

H5验证是存在的,但是有时候自己的需求进行验证,所以正则表达式必须存在的!

拓展知识点

elementList=document.querySelectorAll(selectors);
1、elementList是一个静态的NodeList类型的对象
2、selectors是一个由逗号链接的包含一个或者多个css选择器的字符串

常用正则表达式

JavaScript综合 注册案例_第3张图片

登录小案例代码


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户名密码校验title>
head>
<body>
	<form action="#" method="post" id="formInfo">
		<div id="err" style="color: red;">div>
		<div>
			<label>姓名:label>
			<input type="text" id="name">
		div>
		<div>
			<label>身份证:label>
			<input type="text" id="idno">
		div>
		<div>
			<input type="submit" value="注册">
		div>
	form>
body>
<script type="text/javascript">
	document.getElementById('formInfo').onsubmit = function(){
		var regexp1 = /^[\u4e00-\u9fa5]{2,8}$/,
			regexp2 = /^[1234568]\d{16}[0-9xX]$/;
		var name = document.getElementById('name').value,
			idno = document.getElementById('idno').value,
			err = document.getElementById('err');

		// regexp1.test(name) 返回布尔型
		if (regexp1.test(name) == false) {
			err.innerHTML = '无效姓名';
			return false;
		} else if (regexp2.test(idno) == false) {
			err.innerHTML = '无效身份证';
			return false;
		} else {
			alert('验证通过');
			return true;
		}
	}
script>
html>

你可能感兴趣的:(Web组件化结构开发)