表单验证之错误信息右方提示
说明
图1:简单效果图,
图2、3:当所有文本框都为空或者输入不符合要求时,会在右方提示错误。
效果图
html代码
<body>
<h2>注册用户:</h2>
<hr>
<form action="#" >
<p>用户名:</p>
<p><input type="text" name="username" class="verify uname">
<span class="error">长度不够或用户名已存在!</span>
</p>
<p>密码:</p>
<p><input type="text" name="password" class="verify pw">
<span class="error">密码长度至少6位!</span>
</p>
<p>确认密码:</p>
<p><input type="text" name="repassword" class="verify repw">
<span class="error">长度不够或两次密码不一致!</span>
</p>
<p>邮箱:</p>
<p><input type="text" name="email" class="verify email">
<span class="error">邮箱格式不正确!</span>
</p>
<p>手机号:</p>
<p><input type="text" name="phone" class="verify phone">
<span class="error">手机号格式不正确!</span>
</p>
<p>
<input type="button" value="提交" class="ok" >
<input type="reset" value="重置">
</p>
</form>
</body>
css代码
<style>
*{
font-family: 微软雅黑;
}
.error{
color: #f00;
font-weight: bold;
display: none;
}
</style>
jquery代码
<script>
//给每一个都加一个属性
$('.verify').data({'s':0});
//----------用户名验证---------------
$('.uname').blur(function(){
val=$.trim(this.value);
// alert(val);
//此处先简单判断
//学完php后可进行数据库操作
if(val<3 || val=='zmy'){
//如果当前用户已存在,则将提醒显示
$(this).next().show();
//显示就是错误的,则属性s就为0
$(this).data({'s':0});
}else{
//否则,则将提醒隐藏
$(this).next().hide();
//不显示就是正确的,则属性s就为1
$(this).data({'s':1});
}
});
//-----------密码验证------------------
$('.pw').blur(function(){
val=this.value;
if(val.length<6){
$(this).next().show();
$(this).data({'s':0});
}else{
$(this).next().hide();
$(this).data({'s':1});
}
});
//--------确认密码-------------------
$('.repw').blur(function(){
//确认密码的值
val=this.value;
//密码的值
pwval=$('.pw').val();
if(val.length<6 || val!=pwval){
$(this).next().show();
$(this).data({'s':0});
}else{
$(this).next().hide();
$(this).data({'s':1});
}
});
//----------邮箱格式------------------
$('.email').blur(function(){
val=this.value;
if(val.match(/^\w+@\w+\.\w+$/i)){
$(this).next().hide();
$(this).data({'s':1});
}else{
$(this).next().show();
$(this).data({'s':0});
}
});
//----------手机格式------------------
$('.phone').blur(function(){
val=this.value;
if(val.match(/^1[3456789]\d{9}$/)){
$(this).next().hide();
$(this).data({'s':1});
}else{
$(this).next().show();
$(this).data({'s':0});
}
});
//---------表单验证--------------------
$('.ok').click(function(){
//触发移开事件
$('.verify').blur();
//遍历收集每个人身上的s属性值值
//将获取到的值进行相加,若值不等于5则不可以提交
tot=0;
$('.verify').each(function(){
tot+=$(this).data('s');
});
//
if(tot==5){
$('form').submit();
}
});
</script>
欢迎大家批评指正😊!!!