用html、css、js做一个简单的登录界面的验证

做一个登录界面验证

用户名不允许为空
密码为6-16位数字
邮箱要用email格式
手机号必须1开头且为11位数
地址必须填写
必须勾选同意协议才可以提交

css 用户名框验证如下

				var flag = true;if(name.length<1){$('msgName').innerText=errorMsg[0];flag = false;}

css 密码框验证如下

				if(pwd.length<6||pwd.length>16){$('msgPwd').innerText=errorMsg[1];flag = false;}			

css 邮箱框验证如下

	if(!/^w+@w+\.w+$/.test(email)){$('msgEmail').innerText=errorMsg[2];flag = false;}

css 手机号框验证如下

				if(!/^1[35789]\d{9}$/.test(phone)){$('msgPhone').innerText=errorMsg[3];flag = false;}

css 地址框验证如下

				if(address.length<1){$('msgAddress').innerText=errorMsg[4];flag = false;}

css 同意协议验证如下

				if(!allow){$('msgAllow').innerText=errorMsg[5];flag = false;}

**css 失去焦点事件校验 **

			//使用失去焦点事件校验$('name').addEventListener('blur',function(){if(this.value.length < 1){$('msgName').innerText = errorMsg[0];}else{$('msgName').innerText = '';}})

html写出六个验证框和一个提交按钮

<form action="register"><input type="text" name="name" id="name" placeholder="用户名"><span id="msgName"></span><br><input type="password" name="pwd" id="pwd" placeholder="密码"><span id="msgPwd"></span><br><input type="email" name="email" id="email" placeholder="邮箱"><span id="msgEmail"></span><br><input type="tel" name="phone" id="phone" placeholder="手机号"><span id="msgPhone"></span><br><input type="text" name='address' id="address" placeholder="地址"><span id="msgAddress"></span><br><input type="checkbox" name="allow" id="allow" >同意协议<span id="msgAllow"></span><br><button type="button" onclick="checkData()">提交</button></form>

完整代码如下

<script>var errorMsg=['请输入正确的用户名','密码必须在6-16位之间','请输入正确的邮箱地址','请输入正确的手机号','请输入地址','必须同意协议才能提交'];//获取表单元素;var f = document.forms[0];function checkData(){//重置提示栏$('msgName').innerText='';$('msgPwd').innerText='';$('msgEmail').innerText='';$('msgPhone').innerText='';$('msgAddress').innerText='';$('msgAllow').innerText='';var name = f.name.value;var pwd = f.pwd.value;var email = f.email.value;var phone = f.phone.value;var address = f.address.value;var allow = f.allow.checked;//假设允许提交var flag = true;if(name.length<1){$('msgName').innerText=errorMsg[0];flag = false;}if(pwd.length<6||pwd.length>16){$('msgPwd').innerText=errorMsg[1];flag = false;}if(!/^w+@w+\.w+$/.test(email)){$('msgEmail').innerText=errorMsg[2];flag = false;}if(!/^1[35789]\d{9}$/.test(phone)){$('msgPhone').innerText=errorMsg[3];flag = false;}if(address.length<1){$('msgAddress').innerText=errorMsg[4];flag = false;}if(!allow){$('msgAllow').innerText=errorMsg[5];flag = false;}if(flag){//约定优于配置f.submit();}}//使用失去焦点事件校验$('name').addEventListener('blur',function(){if(this.value.length < 1){$('msgName').innerText = errorMsg[0];}else{$('msgName').innerText = '';}})</script>

js

function $(id){return document.getElementById(id);
}