4.29表单验证

1.4表单选择器
:input
匹配所有input、textarea、select和button 元素
$("#myform :input")选取表单中所有的input、select和button元素
:text
匹配所有单行文本框
$("#myform :text")选取email 和姓名两个input 元素
$("#from1 :password:eq(0)").val();
:password
匹配所有密码框
$("#myform :password" )选取所有元素
:radio
匹配所有单项按钮
$("#myform :radio")选取元素
:checkbox
匹配所有复选框
$(" #myform :checkbox " )选取元素
:submit
匹配所有提交按钮
$("#myform :submit " )选取元素
:image
匹配所有图像域
$("#myform :image" )选取元素
:reset
匹配所有重置按钮
$(" #myform :reset " )选取元素
:button
匹配所有按钮
$("#myform :button" )选取button 元素
:file
匹配所有文件域
$(" #myform :file" )选取元素
:hidden
匹配所有不可见元素,或者type 为hidden的元素


$("#myform :hidden" )选取、style="display: none"等元素

属性过滤选择器
:enabled	
	匹配所有可用元素	
	$(" #userform :enabled" )匹配form内部除编号输入框外的所有元素
:disabled	
	匹配所有不可用元素	
	$(" #userform :disabled" )匹配编号输入框
:checked	
	匹配所有被选中元素(复选框、单项按钮、select 中的option)	
	$(" #userform :checked" )匹配“性别”中的“男”选项和“爱好”中的“编程”选项
:selected	
	匹配所有选中的option 元素	
	$(" #userform :selected" ) 匹配“家乡”中的“北京”选项

案例

<script>
    function check() {
        //1获取用户名
        var uname = $("input[name='uname']");
        var pwd = $("input[name='pwd']");
        return checkUser(uname);

    }

    function checkUser(uname) {
        /* alert($(uname).val());
         alert($(uname).length);*/
        if ($(uname).val() == "" || $(uname).val().length < 6) {
            $("#uname").html("用户名不能为空或长度小于6位");
            $("#uname").css("color", "red");
            return false;
        } else {
            $("#uname").html("放心注册");
            $("#uname").css("color", "green");
            return true;
        }
    }


    $(function () {
        $("input[name='uname']").blur(function () {
            checkUser(this);
        });

    });


    function showForm(){
      /*   var content=$("#form1 :input");
        $(content).each(function(){
            alert($(this).val());
        });
        var content=$("#form1 :checkbox");
        $(content).each(function(){
            alert($(this).val());
        });

        var content=$("#form1 :hidden");
        $(content).each(function(){
            alert($(this).val());
        });

        var content=$("#form1  select option:selected");
        $(content).each(function(){
            alert($(this).val());
        });*/
        var content=$("#form1 input:checked");
        $(content).each(function(){
            alert($(this).val());
        });
    }


</script>

看看

用户名
密码
确认密码
爱好 lol 妹子 抄代码
        </td>
    </tr>
    <tr>
        <td>省份</td>
        <td>
           <select name="pp">
               <option value="hubei">湖北省</option>
               <option value="hunan" >湖南省</option>
               <option value="fujian">福建省</option>
           </select>

        </td>
    </tr>
    <tr>
        <td>
            <input type="hidden" value="0">
            <input type="hidden" value="aaaaa">
            <input type="submit" value="登录"/></td>

    </tr>
</table>
1.5表单验证事件和方法 事件 onblur:失去焦点,当光标离开某个文本框时触发 onfocus:获得焦点,当光标进入某个文本框时触发 方法 blur() 从文本域中移开焦点 focus() 在文本域中设置焦点,即获得鼠标光标 select() 选取文本域中的内容,突出显示输入区域的内容 1.6正则表达式 简单模式 只能表示具体的匹配 示例: var reg=/china/; var reg=/abc8/; 复合模式 可以使用通配符表达更为抽象的规则模式 示例: var reg=/^\w+$/; var reg=/^\w+@\w+\.((com)|(cn)|(com.cn))$/; [email protected] [email protected] [email protected] \w+ --》匹配 jkjkp

正则表达式/^\w?/ 未使用 符号结束 和有 区别
a b c 代表以该正则表达式结尾的字符串例如 abc 只匹配123abc,rtyabc
如果只是abc的话,那么123abc456,rtfabcfgh都可以匹配
加了^ 表示^后面的第一位字符必须匹配的字符串首位相同,不加的话任意顺序匹配。

  var reg=/abc/;
alert(reg.test("dcabca")); true
  var reg=/^abc/;
alert(reg.test("dcabca")); false
  var reg=/^abc/;
alert(reg.test("abcseda")); true
  var reg=/^abc$/;
alert(reg.test("abcseda")); false

 正则表达式符号
/…/ 代表一个模式的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符,等价于[0-9]
\D 除了数字之外的任何字符,等价于[^0-9]
\w 匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9_]
\W 任何非单字字符,等价于[^a-zA-z0-9_]
. 除了换行符之外的任意字符
{n,} 匹配前一项n次,或者多次
{n,m} 匹配前一项至少n次,但是不能超过m次
* 匹配前一项0次或多次,等价于{0,}
+ 匹配前一项1次或多次,等价于{1,}
? 匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}

 正则表达式的应用
用户名、密码、电子邮箱、手机号码、身份证号码、生日、固定电话

常见正则
用户名:/1{3,16}$/

密码:/2{6,18}$/

年 19**|200*|201* 月 01~09|1* 日 19|1029|30|31 2012-09-12 0?[1-9]
1998-08-13
出生日期:/^((19\d{2})|(200\d)|(201[0-6]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/

电子邮箱:/^([a-z0-9_.-]+)@([\da-z-]+).((com)|(cn)|(com.cn))KaTeX parse error: Expected group after '^' at position 14: / /^̲\w+@\w+\.((com)…/
[email protected]
匹配国内电话号码:(\d{3}-\d{8})|(\d{4}-\d{7})
评注:匹配形式如 0511-4405222 或 021-87888822

匹配身份证:\d{15}|\d{18}
评注:中国大陆的身份证为15位或18位


  1. a-zA-Z0-9_- ↩︎

  2. a-z0-9_- ↩︎

猜你喜欢

转载自blog.csdn.net/weixin_44691723/article/details/89681557