html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="test.css" rel="stylesheet">
<script src="test.js"></script>
</head>
<body>
<form method="post">
<p><label><input type="text" class="basic_input" name="user_id" placeholder="工号"></label><p class="msg"></p></p>
<p><label><input type="text" class="basic_input" name="user_name" placeholder="姓名"></label><p class="msg"></p></p>
<p><label><input type="text" class="basic_input" name="user_nickname" placeholder="用户名"></label><p class="msg"></p></p>
<p><label><input type="password" class="basic_input" name="password" placeholder="密码"></label><p class="msg"></p></p>
<p><label><input type="password" class="basic_input" name="sure_password" disabled="" placeholder="确认密码"></label><p class="msg"></p></p>
<p><label><input type="text" class="basic_input" name="phone_one" placeholder="手机"></label><p class="msg"></p></p>
<p><input type="submit" name="submit" value="注册" disabled=""></p>
<input type="hidden" name="submitted" />
</form>
</body>
</html>
js:
window.onload=function() {
/*提取input元素*/
var input = document.getElementsByTagName("input");
var user_id = input[0];
var user_name = input[1];
var user_nickname = input[2];
var password = input[3];
var sure_password = input[4];
var phone_one = input[5];
var submit = input[6];
/*提取p元素*/
var p = document.getElementsByTagName("p");
var user_id_msg = p[0];
var user_name_msg = p[1];
var user_nickname_msg = p[2];
var password_msg = p[3];
var sure_password_msg = p[4];
var phone_one_msg=p[5];
/*为工号设置响应事件*/
user_id.onfocus = function () {
user_id_msg.style.display ="inline";
user_id_msg.innerHTML="    <i class='remind_msg'/></i>请输入你的工号";
}
user_id.onblur=function(){
var match= /^[0-9]{1,10}$/;
if(this.value==""){
user_id_msg.innerHTML="    <i class='error_msg'/></i>工号不能为空";
}else if(!this.value.match(match)) {
user_id_msg.style.display = "inline";
user_id_msg.innerHTML = "    <i class='error_msg'/></i>请输入纯数字";
}else {
user_id_msg.innerHTML="    <i class='success_msg'/></i>";
}
}
/*为姓名设置响应事件*/
user_name.onfocus=function(){
user_name_msg.style.display="inline";
user_name_msg.innerHTML="    <i class='remind_msg'/></i>请输入你的姓名";
}
user_name.onblur=function(){
var match=/^[\u4E00-\u9FA5]{2,5}$/;
if(this.value==""){
user_name_msg.innerHTML="    <i class='error_msg'/></i>姓名不能为空";
}else if(!this.value.match(match)){
user_name_msg.innerHTML="    <i class='error_msg'/></i>请输入汉字，长度为2-5个字符";
}
else {
user_name_msg.innerHTML="    <i class='success_msg'/></i>";
}
}
/*为用户名设置响应事件*/
user_nickname.onfocus=function(){
user_nickname_msg.style.display="inline";
user_nickname_msg.innerHTML="    <i class='remind_msg'/></i>请输入你的用户名";
}
user_nickname.onblur=function(){
var match=/^[\w|\u4E00-\u9FA5]{4,10}$/;
if(this.value==""){
user_nickname_msg.innerHTML="    <i class='error_msg'/></i>用户名不能为空";
}else if(!this.value.match(match)){
user_nickname_msg.innerHTML="    <i class='error_msg'/></i>请输入合法用户名,长度为4-10个字符";
}
else {
user_nickname_msg.innerHTML="    <i class='success_msg'/></i>";
}
}
/*为密码设置响应事件*/
password.onfocus=function(){
password_msg.style.display="inline";
password_msg.innerHTML="    <i class='remind_msg'/></i>请输入你的密码";
}
password.onkeyup=function(){
if(this.value.length>=6){
sure_password.removeAttribute("disabled");
}else{
sure_password.setAttribute("disabled","false");
}
}
password.onblur=function(){
var match=/^[\w]{6,10}$/;
if(this.value==""){
password_msg.innerHTML="    <i class='error_msg'/></i>密码不能为空";
}else if(!this.value.match(match)){
password_msg.innerHTML="    <i class='error_msg'/></i>请输入合法密码,长度为6-15个字符";
}
else {
password_msg.innerHTML="    <i class='success_msg'/></i>";
}
}
/*为确认密码设置响应事件*/
sure_password.onfocus=function(){
sure_password_msg.style.display="inline";
sure_password_msg.innerHTML="    <i class='remind_msg'/></i>请重新输入密码输入";
}
sure_password.onblur=function(){
var match=/^[\w]{6,10}$/;
if(this.value==""){
sure_password_msg.innerHTML="    <i class='error_msg'/></i>确认密码不能为空";
}else if(this.value!=password.value){
sure_password_msg.innerHTML="    <i class='error_msg'/></i>你2次输入的密码不一致";
}
else {
sure_password_msg.innerHTML="    <i class='success_msg'/></i>";
}
}
/*为手机设置响应事件*/
phone_one.onfocus=function(){
phone_one_msg.style.display="inline";
phone_one_msg.innerHTML="    <i class='remind_msg'/></i>请输入手机号";
}
phone_one.onblur=function(){
var match=/^1[3|5|8]\d{9}$/;
if(this.value==""){
phone_one_msg.innerHTML="    <i class='error_msg'/></i>手机号不能为空";
}else if(!this.value.match(match)){
phone_one_msg.innerHTML="    <i class='error_msg'/></i>你的手机号不合法";
}
else {
phone_one_msg.innerHTML="    <i class='success_msg'/></i>";
}
}
}
怪我咯2017-04-10 15:12:54
绑定submit事件判断输入内容，有误就return false或者preventdefault，正确就return true提交或者用ajax配合return false。不建议只在客户端检查，因为js是可以绕过的。
PHP中文网2017-04-10 15:12:54
差不多用html5的格式限制一下就可以了 谁还写那么多啊 反正要在后台验证
$(form).onsubmit(function(){
$.ajax({
});
return false;
});
