js正则表达式学习-小记
2014-06-11 16:14
330 查看
做了一个js正则表达式验证姓名、邮箱、手机号的小功能,记录下来,以备后续学习之用。
html代码:
<div class="lx_xx">
<p><h3>联系信息</h3></p>
<ul>
<li>
<span class="font_color1">*</span>
姓名:
<input type="text" class="np_e" name="contact_name"/>
<span class="font_color1" style="display:none;">*请填写您的姓名</span>
</li>
<li>
<span class="font_color1">*</span>
电话:
<input type="text" class="np_e" name="contact_phone"/>
<span class="font_color1" style="display:none;">*请填写您的手机号并保持畅通</span>
</li>
<li>
<span class="font_color1">*</span>
邮箱:
<input type="text" class="np_e" name="contact_email"/>
<span class="font_color1" style="display:none;">*请填写您的邮箱以便订购成功后收取邮件</span>
</li>
<li>补充说明:
<textarea class="textarea_bg" name="explain">请描述您的其他要求</textarea>
</li>
</ul>
</div>
js代码:
$(document).ready(function(){
$(".np_e").bind('blur',function(){
if($.trim($(this).val()) == ''){
if($(this).attr('name') == 'contact_phone'){
$(this).next('.font_color1').html('*请填写您的手机号并保持畅通');
}
if($(this).attr('name') == 'contact_name'){
$(this).next('.font_color1').html('*请填写您的姓名');
}
if($(this).attr('name') == 'contact_email'){
$(this).next('.font_color1').html('*请填写您的邮箱以便订购成功后收取邮件');
}
$(this).next('.font_color1').show();
}else{
if($(this).attr('name') == 'contact_phone'){
var telNum = $.trim($(this).val());
var reg = /^1((3[0-9])||(5[0-3])||(5[5-9])||(8[5-9])||(80)||(82)||(47))\d{8}$/g; //手机号正则验证
if (isNaN(telNum) || telNum.length != 11) {
$(this).next('.font_color1').html("*手机号码为11位,请正确填写!");
$(this).next('.font_color1').show();
return false;
}
if (!reg.test(telNum)) {
$(this).next('.font_color1').html("*请输入合法的手机号码!");
$(this).next('.font_color1').show();
return false;
}
}
if($(this).attr('name') == 'contact_name'){
var conName = $.trim($(this).val());
var reg_name = /^[\u4e00-\u9fa5a-zA-Z]+$/;
if(!reg_name.test(conName)){
$(this).next('.font_color1').html("*请输入正确的姓名!");
$(this).next('.font_color1').show();
return false;
}
}
if($(this).attr('name') == 'contact_email'){
var conEmail = $.trim($(this).val());
var reg_email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if(!reg_email.test(conEmail)){
$(this).next('.font_color1').html("*请输入正确的邮箱地址!");
$(this).next('.font_color1').show();
return false;
}
}
}
});
$(".np_e").bind('focus',function(){
$(this).next('.font_color1').hide();
});
$("textarea[name='explain']").bind('focus',function(){
$(this).css('color','#333');
if($(this).val() == '请描述您的其他要求'){
$(this).val("");
}
});
$("textarea[name='explain']").bind('blur',function(){
if($(this).val() == ''){
$(this).css('color','rgb(189,189,189)');
$(this).val('请描述您的其他要求');
}else{
}
});
});
html代码:
<div class="lx_xx">
<p><h3>联系信息</h3></p>
<ul>
<li>
<span class="font_color1">*</span>
姓名:
<input type="text" class="np_e" name="contact_name"/>
<span class="font_color1" style="display:none;">*请填写您的姓名</span>
</li>
<li>
<span class="font_color1">*</span>
电话:
<input type="text" class="np_e" name="contact_phone"/>
<span class="font_color1" style="display:none;">*请填写您的手机号并保持畅通</span>
</li>
<li>
<span class="font_color1">*</span>
邮箱:
<input type="text" class="np_e" name="contact_email"/>
<span class="font_color1" style="display:none;">*请填写您的邮箱以便订购成功后收取邮件</span>
</li>
<li>补充说明:
<textarea class="textarea_bg" name="explain">请描述您的其他要求</textarea>
</li>
</ul>
</div>
js代码:
$(document).ready(function(){
$(".np_e").bind('blur',function(){
if($.trim($(this).val()) == ''){
if($(this).attr('name') == 'contact_phone'){
$(this).next('.font_color1').html('*请填写您的手机号并保持畅通');
}
if($(this).attr('name') == 'contact_name'){
$(this).next('.font_color1').html('*请填写您的姓名');
}
if($(this).attr('name') == 'contact_email'){
$(this).next('.font_color1').html('*请填写您的邮箱以便订购成功后收取邮件');
}
$(this).next('.font_color1').show();
}else{
if($(this).attr('name') == 'contact_phone'){
var telNum = $.trim($(this).val());
var reg = /^1((3[0-9])||(5[0-3])||(5[5-9])||(8[5-9])||(80)||(82)||(47))\d{8}$/g; //手机号正则验证
if (isNaN(telNum) || telNum.length != 11) {
$(this).next('.font_color1').html("*手机号码为11位,请正确填写!");
$(this).next('.font_color1').show();
return false;
}
if (!reg.test(telNum)) {
$(this).next('.font_color1').html("*请输入合法的手机号码!");
$(this).next('.font_color1').show();
return false;
}
}
if($(this).attr('name') == 'contact_name'){
var conName = $.trim($(this).val());
var reg_name = /^[\u4e00-\u9fa5a-zA-Z]+$/;
if(!reg_name.test(conName)){
$(this).next('.font_color1').html("*请输入正确的姓名!");
$(this).next('.font_color1').show();
return false;
}
}
if($(this).attr('name') == 'contact_email'){
var conEmail = $.trim($(this).val());
var reg_email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if(!reg_email.test(conEmail)){
$(this).next('.font_color1').html("*请输入正确的邮箱地址!");
$(this).next('.font_color1').show();
return false;
}
}
}
});
$(".np_e").bind('focus',function(){
$(this).next('.font_color1').hide();
});
$("textarea[name='explain']").bind('focus',function(){
$(this).css('color','#333');
if($(this).val() == '请描述您的其他要求'){
$(this).val("");
}
});
$("textarea[name='explain']").bind('blur',function(){
if($(this).val() == ''){
$(this).css('color','rgb(189,189,189)');
$(this).val('请描述您的其他要求');
}else{
}
});
});
相关文章推荐
- JS 正则表达式(学习笔记2)匹配网址url参数
- 【记录】JS正则表达式(学习笔记2)现学现卖还帮美女解决了个问题。
- JS正则表达式学习二:简单的email验证看正则表达式的语法
- 学习js正则表达式
- js正则表达式学习1
- JS 正则表达式的相关方法(正则学习笔记1)
- 正则学习之一:在js中使用正则表达式
- js正则表达式学习2
- 【js学习笔记-061】正则表达式
- js正则表达式学习1
- 常用的一些正则表达式 可以用在js中验证 一起学习~~~
- js之正则表达式学习1
- JS学习笔记5 正则表达式
- js之正则表达式学习2
- JS正则表达式学习一:简单入门
- js之正则表达式学习1
- 重温JavaScript中的正则表达式 js学习笔记
- JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
- js正则表达式学习
- 正则表达式学习小记