validate针对checkbox、radio、select标签的验证

jquery.validate 是jquery的一个插件,用来辅助开发者在客户端方便快捷的实现表单验证,最终达到提高用户体验的目的。

示例代码

<form id="formLogin" method="post">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" />
  </div>
  <div>
    <label for="password">password:</label>
    <input type="text" id="password" name="password" />
  </div>
  <div>
    <label for="password1">password1:</label>
    <input type="text" id="password1" name="password1" />
  </div>
  <div>
    <label for="sex">sex:</label>
    <select id="sex" name="sex">
      <option id="sexopt" value="" selected="selected">请选择</option>
      <option id="sexnan" value="1">男</option>
      <option id="sexnv" value="2">女</option>
    </select>
  </div>
  <div>
    <label for="favorite">level:</label>
    <input type="checkbox" id="sport" name="favorite" value="sport" />sport
    <input type="checkbox" id="write" name="favorite" value="write" />write
  </div>
  <div>
    <label for="level">level:</label>
    <input type="radio" id="one" name="level" value="one" />1
    <input type="radio" id="two" name="level" value="two" />2
  </div>
  <div>
    <input  id="submit" type="button" value="submit" />
  </div>
</form>
@section scripts{
<script type="text/javascript" src="/content/home/index.js"></script>
}

jquery.validate在定位html标签的时候,默认使用name属性来获取标签,所以需要开发者给需要进行验证的标签都加上name属性,并且赋值。

index.js

$().ready(function () {
  $("#formLogin").validate({
    rules: {
      username: {
        required: true
      },
      password: {
        required: true
      },
      sex: {
        required: true
      },
      level: {
        required: true
      },
      favorite: {
        required: true
      }
    },
    messages: {
      username: {
        required: "please input username"
      },
      password: {
        required: "please input password"
      },
      sex: {
        required: "please select sex"
      },
      level: {
        required: "level requred"
      },
      favorite: {
        required: "favorite required"
      }
    },
    errorPlacement: function (error, element) { //指定错误信息位置
      if (element.is(‘:radio‘) || element.is(‘:checkbox‘)) { //如果是radio或checkbox
       var eid = element.attr(‘name‘); //获取元素的name属性
       error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
     } else {
       error.insertAfter(element);
     }
   }
 });
});
$("#submit").click(function () {
  $("#submit").submit();
});

有时候我们需要使用正则表达式对一些输入进行验证,比如说邮箱,电话号码,或者是用户名必须字母开头并且长度要在5-30位,等等之类的。

jquery.validate默认没有提供正则表达式的验证,但是它提供了一个扩展,我们可以自己添加关于正则表达式的验证规则。

$(function () {
    // 判断用户输入的value是否满足传入的正则params的规范
    jQuery.validator.addMethod("pattern", function (value, element, params) {

        if (!params.test(value)) {
            return false;
        }
        return true;
    });
});

这样我们就可以像下面这样使用我们自定义的正则表达式验证了。

$().ready(function () {
    $("#formLogin").validate({
        rules: {

            tel: {
                required:true,
                pattern: /^[0-9]+$/
            }
        },
        messages: {

            tel: {
                required:‘tel required‘,
                pattern: "regex error"
            }
        }

    });
});

怎么样,是不是很酷啊!

$("#formSupplier").validate还有一些其他的参数,跟多的参数可以查看

http://blog.csdn.net/a497785609/article/details/5758613

在这里先介绍两个比较常用的。

errorElement

错误提示的html标签

submitHandler

验证成功之后的操作

$("#formSupplier").validate({
        errorElement: "span",

        submitHandler: function (form) {
            if (btnType == 1) {

                submitUpdateSupplier();
            } else {
                offShelf();
            }
        },
        rules: {
            txtSuUserName: {
                required: true,
                pattern: regexUsername
            }
        },
        messages: {
            txtSuUserName: {
                required: "请填写编号!",
                pattern: "请注意,编号只能使用3-15位的字母组合!"
            }
        }
});

原文地址:https://www.cnblogs.com/lcc1995/p/8118153.html

时间: 2024-10-24 14:31:33

validate针对checkbox、radio、select标签的验证的相关文章

jquery的checkbox,radio,select等方法总结

1.checkbox日常jquery操作. 现在我们以下面的html为例进行checkbox的操作. <input id="checkAll" type="checkbox" />全选 <input name="subBox" type="checkbox" />项1 <input name="subBox" type="checkbox" />项2

表单的一些操作(checkbox radio select)

1.获取checkbox选中项 $("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2.表单 jquery高版本(1.7)属性方法变化 //勾选后输出: //attr('checked'): checked //.prop('checked'): true //.i

checkbox radio select 选中总结

html上的属性被称为attribute ,可以通过 setAttribute 和getAttribute 来设置和获取. checkbox 上的 checked 属性 在第一次设置的时候会立马变成选中状态.如: 1. 在html上直接设置 .<input type="checkbox" checked> 2. 通过 setAttribute("checked","")任意值来设置,即可变成选中状态.但是只在第一次生效,后面无论怎么设

jquery checkbox radio 标签 选中的3种方法

张映 发表于 2013-07-16 分类目录: js/jquery jquery 很灵活,checkbox radio标签选中的方法有很多,在这儿就例举三个常用的方法. 一,测试html 查看复制打印? <div style="margin-top:150px;"> <input type='checkbox' name='test[]' class='checkbox' value='checkbox1'>checkbox1 <input type='c

JQuery操作select checkbox radio总结

JQuery是一个很强大的工具所以我要找到它最便捷的方法,嘻嘻 Select 增删改查: Select查: 1.val值: $("#selectid").val();       //最方便的 2.text值: $("#selectid option:selected").text();       //最方便的 或 $("#selectid").find("option:selected").text() 3.Index值:

jQuery操作radio、checkbox、select示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> jQuery操作radio.checkbox.select示例 </title> <meta name="Generator" con

jquery 操作select,checkbox,radio (整理)

在工作中经常用到select,checkbox,radio,今天有点空闲就整理一下,免得以后用的时候还要重新找. 操作select下拉框 -- 获取值或选中项: 1, $("#select_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发 2,var checkValue=$("#select_id").val(); //获取Select选择的Value 3,var checkText=$(&

javascript获取select,checkbox,radio的值

转发来自  博客园博主:肖品 博主的链接 1.获取和设置select,checkbox,radio的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"&

jquery实用应用之jquery操作radio、checkbox、select

本文收集一些jquery的实用技巧,非常实用的哦,其中对radio.checkbox.select选中与取值的方法. 获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].sele