注册form表单jquery验证提示信息
![js表单验证(员某人)_图一 js表单验证(员某人)_图一](http://pic.erlangyun.com/assets/attachment/product/201708/15/30_1502782968KDvi.jpg)
function Vator(form) {
this.Config = {
errorClass : "text-error",
highlight : function(element) { // hightlight error inputs
element.closest('.form-group').addClass('has-error'); // set error class to the control group
}
};
this.form = jQuery("#register");
}
Vator.prototype = {
//用户名
check_username : function() {
var username_d = jQuery("#username");
var value = username_d.val();
if (value.length == 0) {
this.showError(username_d, "用户名不能为空");
return false;
}else{
this.success(username_d);
}
//var reg = new RegExp(/^[0-9a-zA-Z]{3,12}$/);//用户名规则
var reg = new RegExp(/^[a-zA-Z0-9_]{1,}$/);
if (!reg.test(value)) {
this.showError(username_d, "用户名不符合要求");
return false;
}else{
this.success(username_d);
}
return true;
},//密码
check_password:function(){
var password_d = jQuery("#password");
var value = password_d.val();
if(value.length == 0){
this.showError(password_d, "密码不能为空");
return false;
}else{
this.success(password_d);
}
if(value.length < 5){
this.showError(password_d, "密码长度不能少于5位");
return false;
}else{
this.success(password_d);
}
return true;
},
//密码第二遍
check_rpassword :function(){
var password2_d = jQuery("#password2");
var value = password2_d.val();
if(value == ""){
this.showError(password2_d, "再次输入密码");
return false;
}else if(value !=jQuery("#password").val())
{
this.showError(password2_d, "输入的密码不一致");
return false;
}
this.success(password2_d);
return true;
},
//邮箱
check_email:function(){
var email_d = jQuery("#email");
var value = jQuery("#email").val();
if(value.length==0){
this.showError(email_d,"请输入邮箱");
return false;
}
var reg = new RegExp(/^(w-*.*)+@(w-?)+(.w{2,})+$/);
if(!reg.test(value)){
this.showError(email_d,"邮箱格式错误");
return false;
}
this.success(email_d);
return true;
},
//真实姓名
check_realname:function(){
var realname_d = jQuery("#realname");
var value = realname_d.val();
if(value.length == 0){
this.showError(realname_d,"请输入昵称");
return false;
}
var reg = new RegExp(/^[0-9a-zA-Zu4e00-u9fa5_]{2,16}$/);
if(!reg.test(value)){
this.showError(realname_d,"输入的昵称不合法");
return false;
}
var unLen = value.replace(/[^x00-xff]/g, "**").length;
if(unLen < 1 || unLen > 10) {
this.showError(realname_d,unLen < 1 ? '昵称不能为空' : '昵称不能超过 5 个汉字');
return false;
}
this.success(realname_d);
return true;
},
//年级
check_grade:function(){
var grade_d = jQuery("#grade");
var value = grade_d.val();
if(value == 0){
this.showError(grade_d,"请选择年级");
return false;
}
this.success(grade_d);
return true;
},
//显示错误
showError : function(_element, msg) {
_element.parents(".form-group").find(".tips-block").remove();
_element.parents(".col-item-r").find("i.right").remove();
var ehtml = "<div for='' class='tips-block "
+ this.Config.errorClass + "'>" + msg + "</div>";
_element.parents(".form-group").addClass("has-error").append(ehtml);
if (typeof this.Config.highlight == 'function') {
this.Config.highlight(this.form);
}
},
//验证成功显示
success : function(_element) {
_element.parents(".form-group").removeClass("has-error");
_element.parents(".form-group").find(".tips-block").remove();
_element.parents(".col-item-r").find("i.right").remove();
_element.parents(".col-item-r").append('<i class="right"></i>');
},
//初始化事件绑定
init : function() {
var _this = this;
//blur和keyup触发检查
jQuery("#username").on("blur",function(){
_this.check_username();
});
jQuery("#password").on("blur keyup",function(){
_this.check_password();
if(jQuery("#password2").val()){
_this.check_rpassword();
}
});
jQuery("#password2").on("blur",function(){
_this.check_rpassword();
});
jQuery("#email").on("blur",function(){
_this.check_email();
});
jQuery("#realname").on("blur",function(){
_this.check_realname();
});
jQuery("#grade").on("change",function(){
_this.check_grade();
});
},
//整体检查
action : function() {
if (this.checkForm()) {
alert('注册成功');
// this.form.submit();
}
return false;
},
//表单验证
checkForm : function() {
var flag = true;
if (!this.check_username()) {
flag = false;
}
if(!this.check_password()){
flag = false;
}
if(!this.check_rpassword()){
flag = false;
}
if(!this.check_email()){
flag = false;
}
if(!this.check_realname()){
flag = false;
}
if(!this.check_grade()){
flag = false;
}
return flag;
}
};