- /*!
- * jQuery validate plugin by Chart
- * Based on jquery-1.8.3.js
- * Released under the MIT license
- * Wed Mar 12 2014 16:24:46 GMT+0800 HFUT
- *
- 代码示例
- html:
- 在需要验证的表单加上自己的id
- 例如
- <form class="form-horizontal" id="form_add"></form>
- 对需要验证的input元素添加method属性, 例如:method="maxlength-5" 多个验证用空格分开
- 例如method="maxlength-5 email-请输入正确的电子邮件格式";
- ajax验证需要放在所有的验证之后例如:
- method="maxlenth-5 onlyone-http://127.0.01/ajax.php";
- 验证的方法-后面为错误提示.
- 显示在input的下一个元素中,如实例中的span, 读者可以根据自己定义相应的span样式;
- 如下:
- <input type="text" id="catename" name="catename" method="maxlength-5 onlyone-http://127.0.0.1/ajax.php">
- <span class="help-inline"></span>
- 由于时间仓促,仅写了六种验证email,require,phonenumber,onlyone,maxlength.exist, 后面如有兴趣的读者可以自行添加验证.
- js代码:
- $(function(){
- $("#form_add").validate({
- url:"http://127.0.0.1/catemanage/add.html"
- });
- })
- url: 验证通过之后跳转的地址,默认为null
- *
- *
- */
- $.fn.validate = function(settings){
- //console.log(1);
- var config = {
- ajax:false,
- ajaxfunc:null,
- url:null
- }
- var submit = $(this).find('*[type=submit]');
- //console.log(submit);
- config = $.extend(config,settings);
- var form = this;
- var validate_item = {
- 'email':true,
- 'require':true,
- 'phonenumber':true,
- 'onlyone':true,
- 'maxlength':true,
- 'exist':true
- }
- var sub = false;
- // 遍历form元素
- this.each(function(){
- if(this.tagName == 'FORM'){
- form = $(this);
- }
- else{
- form = $(this).find('form');
- }
- var element = form.find('input[type!=submit]');
- element.each(function(){
- if ($(this).attr('type')=='text') {
- //console.log(1);
- if($(this).attr('method')){
- var func = $(this).attr('method').split(' ')
- if(func[0]=='ajax'){
- if(func[1]);
- $(this).parents('tr').find('td[class=error]').show().html(func[1]);
- }
- else{
- //var validate_func = func[0];
- //var validate_msg = func[1];
- $(this).blur(function(){
- for(var o in func){
- var func_detail = func[o].split('-');
- var validate_func = func_detail[0];
- var validate_msg = func_detail[1];
- __getrule($(this),validate_func,validate_msg,$(this).val());
- //console.log(validate_item[validate_func]);
- if(validate_item[validate_func] == false)break;
- }
- })
- $(function(){
- for(var o in func){
- var func_detail = func[o].split('-');
- var validate_func = func_detail[0];
- var validate_msg = func_detail[1];
- __getrule($(this),validate_func,validate_msg,$(this).val());
- //if(sub == false)break;
- }
- })
- }
- }
- };
- //APPLY RULES TO ELEMENT
- function __getrule(ele,rule_method,rule_tips,ajax_data){
- validate[rule_method](ele,rule_tips,ajax_data);
- for(var i in validate_item){
- if(validate_item[i]==false){
- sub = false;
- break;
- }
- else{
- sub = true;
- }
- }
- }
- function isNull(element){
- element.parents(".control-group").removeClass('success').addClass('error');
- element.next().html("不能为空值");
- //sub = false;
- return false
- }
- function isRight(element){
- element.parents(".control-group").removeClass('error').addClass('success');
- element.next().html("输入正确");
- //sub = true;
- return true;
- }
- function isWrong(element,tips){
- element.parents(".control-group").removeClass('success').addClass('error');
- element.next().html(tips);
- //sub = false;
- return false;
- }
- //DEFINE VALIDATE FUNCTION
- var validate = {
- 'email':function(element,msg_tips){
- var reg = new RegExp('^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$');
- if(reg.test(element.val())){
- validate_item.email = isRight(element);
- }
- else if(element.val()==''){
- validate_item.email = isNull(element);
- }
- else{
- validate_item.email = isWrong(element,msg_tips);
- }
- },
- 'phonenumber':function(element,msg_tips){
- var reg = new RegExp('^[1][358][0-9]{9}$');
- if(reg.test(element.val())){
- validate_item.phonenumber = isRight(element);
- }
- else if(element.val()==''){
- validate_item.phonenumber = isNull(element);
- }
- else{
- validate_item.phonenumber = isWrong(element,msg_tips);
- }
- },
- 'require':function(element,msg_tips){
- if(element.val()==''){
- validate_item.require = isNull(element);
- }
- else{
- validate_item.require =isRight(element);
- }
- },
- 'onlyone':function(element,url,data){
- if(element.val()==''){
- validate_item.onlyone =isNull(element);
- }
- else{
- $.ajax({
- url:url,
- async:true,
- type:'POST',
- data:{data:data},
- success:function(response){
- //console.log(response);
- if(response){
- validate_item.onlyone = isRight(element);
- }
- else{
- validate_item.onlyone = isWrong(element,'数据库中已存在相同的值');
- }
- }
- })
- }
- },
- 'maxlength':function(element,argument){
- if(element.val()==''){
- validate_item.maxlength =isNull(element);
- }
- else{
- if(element.val().length>argument){
- validate_item.maxlength =isWrong(element,'长度不应超过'+argument+'个字符');
- }
- else{
- validate_item.maxlength = isRight(element);
- }
- }
- },
- 'exist':function(element,url,data){
- if(element.val()==''){
- validate_item.exist =isNull(element);
- }
- else{
- $.ajax({
- url:url,
- async:true,
- type:'POST',
- data:{data:data},
- success:function(response){
- if(response){
- validate_item.exist =isRight(element);
- }
- else{
- validate_item.exist = isWrong(element,'数据库中不存在此数据');
- }
- }
- })
- }
- }
- }
- })
- })
- submit.click(function(){
- for(var i in validate_item){
- if(validate_item[i]==false){
- sub = false;
- break;
- }
- else{
- sub = true;
- }
- }
- if(sub){
- $.ajax({
- url:config.url,
- type:'post',
- data:form.serialize(),
- success:function(response){
- return response;
- }
- })
- }
- else{
- console.log(form.serialize());
- return false;
- }
- })
- }
- //该片段来自于http://www.codesnippet.cn/detail/1811201410993.html
来源: http://www.codesnippet.cn/detail/1811201410993.html