AdminLTE3 Form表单插件

快来打我* 2021-06-26 16:06 613阅读 0赞

### 1. 序列化 ###

> CDN：https://cdnjs.com/libraries/jquery.serializeJSON

### 2. 校验 ###

> 官网：https://jqueryvalidation.org/

-- adminlte之前
    
    -- 内置验证规则：required,email,minlength,equalTo
    <script src="./static/plugins/jquery-validation/jquery.validate.min.js"></script>
    
    -- 扩展规则
    <script src="./static/plugins/jquery-validation/additional-methods.min.js"></script>
    
    -- 中文提示
    <script src="./static/plugins/jquery-validation/localization/messages_zh.min.js"></script>

页面

<form role="form" id="quickForm">
    	<div class="card-body">
    		<div class="form-group">
    			<label for="exampleInputEmail1">Email address</label>
    			<input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    		</div>
    		<div class="form-group">
    			<label for="exampleInputPassword1">Password</label>
    			<input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    		</div>
    		<div class="form-group mb-0">
    			<div class="custom-control custom-checkbox">
    				<input type="checkbox" name="terms" class="custom-control-input" id="exampleCheck1">
    				<label class="custom-control-label" for="exampleCheck1">I agree to the <a href="#">terms of
    						service</a>.</label>
    			</div>
    		</div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
    </form>

校验规则

$('#quickForm').validate({ 
    	rules: { 
    		email: { 
    			required: true,
    			email: true,
    		},
    		password: { 
    			required: true,
    			minlength: 5
    		},
    		terms: { 
    			required: true
    		},
    	},
        // 自定义提示信息
    	// messages: { 
    	// email: { 
    	// required: "Please enter a email address",
    	// email: "Please enter a vaild email address"
    	// },
    	// password: { 
    	// required: "Please provide a password",
    	// minlength: "Your password must be at least 5 characters long"
    	// },
    	// terms: "Please accept our terms"
    	// },
    	errorElement: 'span',
    	errorPlacement: function (error, element) { 
    		error.addClass('invalid-feedback');
    		element.closest('.form-group').append(error);
    	},
    	highlight: function (element, errorClass, validClass) { 
    		$(element).addClass('is-invalid');
    	},
    	unhighlight: function (element, errorClass, validClass) { 
    		$(element).removeClass('is-invalid');
    	},
        submitHandler: function (form) { 
            let res = $(form).serializeJSON();
            alert(JSON.stringify(res))
        }
    });

API

// 验证结果
    let result = $('#quickForm').valid();
    // 全局设置
    jQuery.validator.setDefaults({ 
        debug: true
    });

### 3. 日期选择 ###

> 官网：http://www.daterangepicker.com/
> 
> 官网：https://tempusdominus.github.io/bootstrap-4/

-- 依赖moment.js
    <script src="./static/plugins/moment/moment.min.js"></script>
    <script src="./static/plugins/moment/locale/zh-cn.js"></script>
    
    <link rel="stylesheet" href="./static/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="./static/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    
    <script src="./static/plugins/daterangepicker/daterangepicker.js"></script>
    <script src="./static/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>

选择日期

-- html
    <div class="form-group">
    	<label>Date:</label>
    	<div class="input-group date" id="reservationdate" data-target-input="nearest">
    		<input type="text" class="form-control datetimepicker-input" data-target="#reservationdate" />
    		<div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
    			<div class="input-group-text"><i class="fa fa-calendar"></i></div>
    		</div>
    	</div>
    </div>
    
    -- date only
    $('#reservationdate').datetimepicker({
    	format: 'L'
    });
    
    -- time only
    $('#reservationdate').datetimepicker({
    	format: 'LT'
    });

选择日期范围

-- html
    <div class="form-group">
    	<label>Date range:</label>
    	<div class="input-group">
    		<div class="input-group-prepend">
    			<span class="input-group-text">
    				<i class="far fa-calendar-alt"></i>
    			</span>
    		</div>
    		<input type="text" class="form-control float-right" id="reservation">
    	</div>
    </div>
    
    -- 基本使用
    $('#reservation').daterangepicker()
    
    -- 单个日期
    $('#reservation').daterangepicker({
    	singleDatePicker: true,
    	showDropdowns: true,
    })
    
    -- 默认范围
    $('#reservation').daterangepicker({
    	ranges: {
    		'Today': [moment(), moment()],
    		'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    		'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    		'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    		'This Month': [moment().startOf('month'), moment().endOf('month')],
    		'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    	},
    	showDropdowns: true,
    })

### 4. Checkbox, Radio ###

> GitHub：https://github.com/bantikyan/icheck-bootstrap

使用

<div class="form-group clearfix">
    	<div class="icheck-primary d-inline">
    		<input type="checkbox" id="checkboxPrimary1" checked>
    		<label for="checkboxPrimary1">
    		</label>
    	</div>
    	<div class="icheck-primary d-inline">
    		<input type="checkbox" id="checkboxPrimary2">
    		<label for="checkboxPrimary2">
    		</label>
    	</div>
    	<div class="icheck-primary d-inline">
    		<input type="checkbox" id="checkboxPrimary3" disabled>
    		<label for="checkboxPrimary3">
    			Primary checkbox
    		</label>
    	</div>
    </div>