JQuery学习(6)调用正则判断输入内容

最新推荐文章于 2024-01-16 11:20:16 发布

gongth_12

最新推荐文章于 2024-01-16 11:20:16 发布

阅读量1.2k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/gongth_12/article/details/8839926

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JQuery实现表单输入内容的验证，包括名字、密码、电话号码、电子邮件等字段。通过定义多个函数如isInteger、isEmail、isString、isTelephone、isMobile和isUri，利用正则表达式检查用户输入是否符合要求，并提供了相应的错误提示。同时，展示了JQuery的一些基本操作，如文档加载完成后的操作、元素样式改变、事件绑定等。

摘要由CSDN通过智能技术生成

7.<script type="text/javascript" language="javascript" >

8.    function validata(){   
9.        if($("#username").val()==""){

10.            document.write("请输入名字");

11.            return false;

12.        }   
13.        if($("#password").val()==""){

14.            document.write("请输入密码");

15.            return false;

16.        }          
17.        if($("#telephone").val()==""){

18.            document.write("请输入电话号码");

19.        }   
20.        if($("#email").val()==""){

21.            $("#email").val("shuangping@163.com");

22.        }   
23.    }      
24.       
25.    function isInteger(obj){   
26.           
27.        reg=/^[-+]?\d+$/;    
28.        if(!reg.test(obj)){

29.            $("#test").html("<b>Please input correct figures</b>");

30.        }else{

31.            $("#test").html("");

32.        }   
33.    }   
34.    function isEmail(obj){   
35.        reg=/^\w{3,}@\w+(\.\w+)+$/;

36.        if(!reg.test(obj)){

37.            $("#test").html("<b>请输入正确的邮箱地址</b>");

38.        }else{

39.            $("#test").html("");

40.        }   
41.    }   
42.    function isString(obj){   
43.        reg=/^[a-z,A-Z]+$/;   
44.        if(!reg.test(obj)){

45.            $("#test").html("<b>只能输入字符</b>");

46.        }else{

47.            $("#test").html("");

48.        }   
49.    }   
50.    function isTelephone(obj){   
51.        reg=/^(\d{3,4}\-)?[1-9]\d{6,7}$/;

52.        if(!reg.test(obj)){

53.            $("#test").html("<b>请输入正确的电话号码！</b>");

54.        }else{

55.            $("#test").html("");

56.        }   
57.    }   
58.    function isMobile(obj){   
59.        reg=/^(\+\d{2,3}\-)?\d{11}$/;

60.        if(!reg.test(obj)){

61.            $("#test").html("请输入正确移动电话");

62.        }else{

63.            $("#test").html("");

64.        }   
65.    }   
66.    function isUri(obj){   
67.        reg=/^http:\/\/[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;

68.        if(!reg.test(obj)){

69.            $("#test").html($("#uri").val()+"请输入正确的inernet地址");

70.        }else{

71.            $("#test").html("");

72.        }   
73.    }   
74.       
75.    //document加载完毕执行

76.    $(document).ready(function() {   
77.    // do something here

78.       
79.    //隔行换色功能

80.    $("p").each(function(i){

81.        this.style.color=['red','green','blue','black'][i%2]

82.        });   
83.       
84.    //eq(2)获取$("p")集合的第3个元素

85.    $("p").eq(2).click(function(){$("#display").css("color","blue")});

86.       
87.    //所有test中的p都附加了样式"over"。

88.    $("#test>p").addClass("over");

89.       
90.    //test中的最后一个p附加了样式"out"。

91.    $("#test p:last").addClass("out");

92.       
93.    //选择同级元素还没看懂

94.    //$('#faq').find('dd').hide().end().find('dt').click(function()

95.       
96.    //选择父级元素

97.    $("a").hover(

98.                function(){$(this).parents("p").addClass("out")},

99.                function(){$(this).parents("p").removeClass("out")})

100.       
101.       
102.    //hover鼠标悬停效果，toggle每次点击时切换要调用的函数  ,

103.    //trigger(eventtype): 在每一个匹配的元素上触发某类事件,

104.    //bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。

105.  
106.    //方法的连写

107.    $("#display").hover(function(){

108.            $(this).addClass("over");

109.        },function(){   
110.            $(this).removeClass("over");

111.        })   
112.        .click(function(){alert($("#display").text())});

113.           
114.       
115.       
116.       
117.    if($.browser.msie){//判断浏览器，若是ie则执行下面的功能

118.           
119.        //聚焦

120.        $("input[@type=text],textarea,input[@type=password]")

121.        .focus(function(){$(this).css({background:"white",border:"1px solid blue"})})

122.        //也可以这样连着写,

123.        //.blur(function(){$(this).css({background:"white",border:"1px solid black"})})

124.           
125.        //失去焦点

126.        //css样式可以通过addClass()来添加

127.        $("input[@type=text],textarea,input[@type=password]")

128.        .blur(function(){$(this).css({background:"white",border:"1px solid black"});});

129.    }   
130.       
131.    });   
132.       
133.       
134.       
135.</script>