2. 程式人生 > >bootstrap表單校驗之bootstrapvalidator

bootstrap表單校驗之bootstrapvalidator

阿新 • • 發佈：2019-01-17

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<html>
<head>
   <link rel="stylesheet" href="<%=path %>/assets/plugins/bootstrap-validator/vendor/bootstrap/css/bootstrap.css"/>
   <link rel="stylesheet" href="<%=path %>/assets/plugins/bootstrap-validator/dist/css/bootstrapValidator.css"/>
   <script type="text/javascript" src="<%=path %>/assets/plugins/bootstrap-validator/vendor/jquery/jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="<%=path %>/assets/plugins/bootstrap-validator/vendor/bootstrap/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="<%=path %>/assets/plugins/bootstrap-validator/dist/js/bootstrapValidator.js"></script>
   <script type="text/javascript" src="<%=path %>/assets/plugins/bootstrap-validator/dist/language/zh_CN.js"></script>
   <script type="text/javascript" src="<%=path %>/assets/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#myForm').bootstrapValidator({
//        live: 'disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            areaId: {
                validators: {
                    notEmpty: {
                        message: '所屬區域不能為空'
                    }
                }
            },
            activityName: {
                validators: {
                    notEmpty: {
                        message: '活動名稱不能為空'
                    }
                }
            },
            startDate: {
                validators: {
                    notEmpty: {
                        message: '活動開始時間不能為空'
                    }
                }
            },
            endDate: {
                validators: {
                    notEmpty: {
                        message: '活動結束時間不能為空'
                    }
                }
            },
            allowJoinCount: {
                validators: {
                    notEmpty: {
                        message: '中獎次數不能為空'
                    }
                }
            },
            sort: {
                validators: {
                    notEmpty: {
                        message: '排序不能為空'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            }
        }
    });
});
function validateForm(){
    $('#myForm').bootstrapValidator('validate');
      var flag = ('#myForm').data('bootstrapValidator').isValid();//1.成功，0.失敗

//手動設定校驗

  /*

   if($("#innId").val() == ""){
        $('#innStoryEditForm').data('bootstrapValidator').updateStatus('innId', 'NOT_VALIDATED').validateField('innId');//不合法
    }else{
        $('#innStoryEditForm').data('bootstrapValidator').updateStatus('innId', 'VALIDATED').validateField('innId');//合法
    }

*/

}
</script>
</head>
<body>
<div style="width:95%;">
    <input type="button" id="validateForm" value="校驗" onclick="validateForm();"/>
    <form class="form-horizontal" role="myForm" id="myForm">
       <input type="hidden" id="activityId" name="activityId" value="${dataInfo.activityId }"/>
       <div class="form-group">
          <label for="areaId" class="col-sm-2 control-label">所屬區域</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" id="areaId" name="areaId" value="${dataInfo.areaId }">
          </div>
          <label for="activityName" class="col-sm-2 control-label">活動名稱</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" id="activityName"  name="activityName" value="${dataInfo.activityName }"
                placeholder="">
          </div>
       </div>
       <div class="form-group">
          <label for="activityType" class="col-sm-2 control-label">活動型別</label>
          <div class="col-sm-4">
               <select class="form-control" id="activityType"  name="activityType">
               </select>
          </div>
       </div>
       <div class="form-group">
          <label for="activityRule" class="col-sm-2 control-label">活動規則</label>
          <div class="col-sm-10">
                <textarea class="form-control" id="activityRule"  name="activityRule" style="resize:none;height:100px;">${dataInfo.activityRule }</textarea>
          </div>
       </div>
       <div class="form-group">
          <label for="startDate" class="col-sm-2 control-label">開始時間</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" readonly = "readonly" id="startDate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"  name="startDate" value="${dataInfo.startDate }"
                placeholder="">
          </div>
          <label for="endDate" class="col-sm-2 control-label">結束時間</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" readonly = "readonly" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="endDate"  name="endDate" value="${dataInfo.endDate }"
                placeholder="">
          </div>
       </div>
       <div class="form-group">
          <label for="allowJoinCount" class="col-sm-2 control-label">允許中獎次數</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" id="allowJoinCount"  name="allowJoinCount" value="${dataInfo.allowJoinCount }"
                placeholder="">
          </div>
          <label for="sort" class="col-sm-2 control-label">排序</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" id="sort"  name="sort" value="${dataInfo.sort }"
                placeholder="">
          </div>
       </div>
    </form>
</div>
</body>
</html>

相關推薦

bootstrap表單校驗之bootstrapvalidator

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%     String path = request.getContextPath();     String b

easyui 進階之tree easyui 進階之表單校驗、自定義校驗

前言 easyui是一種基於jQuery的使用者介面外掛集合，它為建立現代化，互動，JavaScript應用程式，提供必要的功能，完美支援HTML5網頁的完整框架，節省網頁開發的時間和規模。非常的簡單易學。 easyui中文網：http://www.jeasyui.net/ easyui官網：http:

easyui 進階之表單校驗、自定義校驗

前言 easyui是一種基於jQuery的使用者介面外掛集合，它為建立現代化，互動，JavaScript應用程式，提供必要的功能，完美支援HTML5網頁的完整框架，節省網頁開發的時間和規模。非常的簡單易學。 今天我們來學習表單校驗以及如何自定義表單校驗 正文 一、從標記建立驗證框（vali

element-ui之form表單校驗的使用詳解

先吐槽一下，個人感覺element-ui提供的文件寫的太少，用的時候會踩很多坑。 如：表單驗證方法 傳入的value沒有值  等。 下面，是我對element-ui  form表單驗證使用的總結，應該能解決大部分問題，或者，也可以直接拿過去修改使用。 （本文程式碼使用的

javascript之表單校驗以及正則表示式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/java

javascript高階之表單校驗

表單校驗是指:規範資料的輸入格式: 方式一: 思路:(1)建立一個form標籤,使用onsumbit事件 (2)建立文字輸入項,建立submit提交按鈕, (3)使用繫結的第一種方式:1根據id拿到標籤物件,在根據標籤物件拿到該標籤的value值        2if判斷為

JQuery中內容操作函數、validation表單校驗

調用方法 scrip 註意 語言 rul asc javascrip 最前面插入 獲取 JQuery:內容體拼接（可以直接拼接元素節點和內容節點） 　　JQuery實現： 　　　　方案1：A.append(B); == B.appendTo(A);A的後面拼接B 　　　

表單校驗常用原生js庫

rim pro fun 常用 ltrim turn () js庫 his 1.字符串去除左右空格繼承形式// 除去左右空格String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g,

常用表單校驗

通過 let div 返回 letter 常用 fun als 英文 /*用途：檢查輸入字符串是否只由英文字母和數字組成 輸入：obj 字符串 返回：如果通過驗證返回true,否則返回false*/ function isNumberOrLetter(obj){

Angular 表單校驗

result tex lar uil img 輸入 password value mod 1.html <form [formGroup]="formModel" (submit)="submit()"> <div> 用戶名

JavaScript學習——完善註冊頁面表單校驗

函數 提示 步驟 表格 ges function img 但是 最終 1、之前我們已經使用彈出框的方式實現了表單校驗的功能，但是此種方式用戶體驗效果很差 我們希望做成把提示信息和校驗結果放在輸入欄的後面。 2、步驟分析 （此案例基於HTML&CSS——網站註冊頁面實

表單校驗的值$valid、$invalid、$pristine和$dirty

狀態 ng- 愛好 定義 ida from 用戶操作 num $set angular內置了一套表單校驗，其中包含幾個狀態 ① valid、invalid、pristine和dirty 　　valid標記表單元素有效； 　　invalid標記表單元素無效； 　　pristi

表單校驗

長度 username clas 電話 增加 use rul action pwd 1、form表單驗證 <!DOCTYPE html> <html> <head lang="en"> <meta ch

Android註解方式實現表單校驗

view print tde try success lte ise rdb emp 在開發中總會遇到輸入框的輸入規則限制 比如 電話輸入框電話號碼的校驗，密碼規則的校驗等 ，我們通常做法是提交操作時對每個輸入框的輸入內容進行校驗，很多的if else ，代碼看起來很亂，

案例15-基本的表單校驗使用validate

true 插件 control 位置 mes lin jquery插件 相關 顯示中文 1 導入插件 <!--引入jquery相關文件 --> <script src="js/jquery-1.11.3.min.js" type="text/ja

jQuery validate 設置失去焦點就校驗和失去焦點就表單校驗是否通過

checked 設置 ali idt date jquery req BE font js部分 html部分 自定義樣式： /*自定義validate覆蓋掉了 validate 裏面默認的顯示樣式*/ label.error{

Vue 表單校驗 vee-validate

function eal for ble this code 文字 email onf gitHub 地址：https://github.com/baianat/vee-validate 官網API 地址：https://baianat.github.io/vee-val

JavaScript完成簡單的表單校驗案例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊介面</title> <script type="text/javascript">

js 表單校驗

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>   <TITLE> New Document </TITLE>

vue+element中自定義表單校驗特殊字元

本次專案基於vue和element-ui，需要在前端使用者輸入的時候去校驗輸入的內容中是否含有特殊符號，如果有，則提示使用者不支援輸入特殊符號。 校驗規則方法 export function checkSpecificKey(str) { var special