
效果图:

html代码:
<form action="" method="" name="form2"> <p class="m_t30 error_p2"> <p> 我是 <select name="identity" id="ko" class="form-control"> <option></option> <option value="investor">投资者</option> <option value="developer">地产开发商</option> </select> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="text" class="form-control" name="name" placeholder="用户名"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="email" class="form-control" name="email" placeholder="电子邮箱"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="tel" class="form-control" name="phone" placeholder="手机"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <select name="country" class="form-control"> <option></option> <option>国家或地区</option> <option value="1">中国</option> <option value="2">美国</option> </select> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <select name="province" class="form-control"> <option></option> <option>州/省</option> <option value="1">广东</option> <option value="2">加州</option> </select> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="password" class="form-control" name="pwd" placeholder="密码"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="password" class="form-control" name="pwd2" placeholder="再次确认密码"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p> </p> </p> <p class="m_t10"> <p> <button class="btn btn_login" type="button" onclick="btn_register()">下一步</button> </p> </p> </form>
css代码:
<style>
.m_t10 {
margin-top: 20px;
}
.error_p2 {
background-color: #FF6900;
color: white;
font-size: 10px;
padding: 5px;
border-radius: 5px;
display: none;
}
.error_p2 i {
margin-right: 5px;
}
</style>js代码
简要说明:
//执行对应表单元素的失去焦点事件$('input[name=XX]',formX).blur()
//定义对应的参数来获取值,如:var pwd=$(this).val();
//定义参数获取对应错误提示信息的标签元素对象,这里的是var span = $(this).parents('.error_p2').find('.error_p2');
//简要说明.parents('')方法获取的是祖先元素为('.error_p2'),看清楚有带"s",简单来说如果.error_p2是当前元素的上三级$('this').parent().parent().parent(),而用$('this').parents('.error_p2')能一步到位获取到该元素对象,而find('')方法刚好相反,一步到位的获取对应后辈元素对象
//然后就是根据条件判断,判断的正则表达式我就不一 一举例了(因为我也记不住那么多= =、),是否符合返回对应的数组元素true、false值,实现隐藏错误提示,并且给数组validate2的值赋值。
//最后提交表单时,再次执行判断isOK是否为true
//isOK值为false的话就全部执行一次表单元素的失去焦点事件,从而提示错误信息
//isOK值为true的话才提交表单。
//ps:表单里的button元素如果不是提交按钮,记得将type=“button”,否则默认是type=“submit”,点击就会提交;写在最后的话:
样式和布局没怎么设置好,页面效果欠佳,深感抱歉
还是那句话,写jq先想好要获取哪些对象,执行什么事件,最后什么元素对象达到怎样的效果,parents和find方法和省事,不过使用时注意嵌套好p达到整体性效果。
