正文
jquery验证滑块,html滑块验证
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jquery-ui滑块怎么判断滑块向前滑动和向后滑动
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title滑块实现/title
meta name="description" content="滑块实现"
meta name="keywords" content="滑块实现"
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /
link rel="stylesheet" href="weui.min.css"
style
div {
display: block;
}
.riskBlock_list_content{
-webkit-flex: 1;
-ms-flex: 1;
border-left: 1px dashed #f96549;
}
.weui-slider-box{
display: flex;
-webkit-box-align: center;
align-items: center;
}
.weui-slider {
padding: 15px 18px;
user-select: none;
margin-top: 23px;
}
.weui-slider-box .weui-slider {
-webkit-box-flex: 1;
flex: 1;
}
.weui-slider {
user-select: none;
}
.weui-slider__inner {
position: relative;
border: 1px solid #27bdeb;
height: 4px;
border-radius: 4px;
background-color: #fff;
}
.weui-slider__track {
opacity: 0;
}
weui.min.css:5
.weui-slider__track {
height: 2px;
background-color: #1aad19;
}
.weui-slider__handler {
position: absolute;
width: 1px;
top: 0;
border-radius: 0px;
border: none;
box-shadow: none;
margin-left: -5px;
margin-top: 0;
background-color: transparent;
}
.handler {
background: url(img/slide_bg.png) no-repeat;
background-size: 29px 42px;
-webkit-background-size: 29px 42px;
width: 29px;
height: 42px;
top: -33px;
left: -10px;
position: absolute;
color: #27bdeb;
font-weight: bold;
font-size: 12px;
text-align: center;
}
/style
/head
body
div class="riskBlock__list__content"
div class="riskBlock__list__content__slider"
div class="weui-slider-box" id="slider1"
div class="weui-slider"
div id="sliderInner" class="weui-slider__inner"
div id="sliderTrack" style="width: 50%;" class="weui-slider__track"/div
div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"
div class="handler"50/div
/div
/div
/div
/div
/div
/div
script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"/script
script src="js/jquery-weui.min.js"/script
script type="text/javascript"
$(function () {
$('#slider1').slider(function (per) {
$('#sliderValue').text(per+'kg');
$('#slider1 .handler').text(per)
});
})
/script
/body
/html
相关问答
Q1: jquery滑块拖动验证插件使用
文章参考自： 链接
需要jq币，鉴于经常逛jQuery插件库，花了30大洋买了100jq币，发现开发还是挺费钱的，，，哈哈
搞定
此插件直接使用可能不是很适合具体业务需求，可以根据自身需要修改slide-unlock.css样式文件，比如说将#slider中的margin: 100px auto;改成margin: 10px auto;这样margin值减小为10px，可能更适合
Q2: 如何使用jQuery的validate
一、使用Jquery.Validate进行验证方法
$(document).ready(function () {
$("#pageForm").validate({
rules: {
DictKey: { required: true, maxlength: 10 },
DictContent: { required: true, maxlength: 10 }
},
messages: {
DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") },
DictContent: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") }
},
submitHandler: function (form) {
form.submit();
}
})
})
DictKey ，DictContent：指需要验证的控件ID
submitHandler ：指通过验证后运行的函数，里面写入表单要提交的函数，否则表单不会提交
二、列出常用默认验证规则
(1)required:true 必输字段
(2)email:true 必须输入正确格式的电子邮件
(3)url:true 必须输入正确格式的网址
(4)date:true 必须输入正确格式的日期
(5)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(6)number:true 必须输入合法的数字(负数，小数)
(7)digits:true 必须输入整数
(8)creditcard: 必须输入合法的信用卡号
(9)equalTo:"#field" 输入值必须和#field相同
(10)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(11)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(12)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(13)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(14) equalLength:10 输入长度必须是10
(14)range:[5,10] 输入值必须介于 5 和 10 之间
(15)max:5 输入值不能大于5
(16)min:10 输入值不能小于10
三、使用ajax方法验证输入值是否存在
当文本框输入值时，或改变输入值时会自动到Server去验证输入值是否在数据库中存在
JS代码如下：
DictKey: { required: true, maxlength: 10,
remote: { //验证用户名是否存在
type: "POST",
url: '@Url.Content("~/Account/Test/")' //servlet
}
},
DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符"),remote:"用户名已被注册"},
Server端：
[HttpPost]
public JsonResult Test(string DictKey) //DictKey即要验证控件的ID值
{
bool result;
if (DictKey == "a")
{
result = true;
}
else
{
result = false;
}
return Json(result);
}
根据Server端返回的True,False来决定验证是否通过
四、非submit按钮结合Jquery.Form进行提交
如果不是submit提交按钮，比如单击某个按钮触发表单验证，这时表单验证可用如下方式
function validateForm() {
//validate方法参数可选
return $("#form1").validate({
rules: {
},
messages:{
}
}).form();
}
function doSubmit(){
//do other things
//验证通过后提交
if(validateForm()){
form.submit()
//这边可以结合Jquery.Form进行AjaxSubmit方式异步提交
$("#UpdateForm").AjaxSubmit (function(){
Alert(“AjaxForm提交完成”)
});
}
}
Q3: 移动端在jquery里面怎么做滑块验证
jQuery拖滑拽动验证码插件，实现移动端滑动解锁，已实现效果，可直接使用。
Q4: jquery仿淘宝网拖动滑块验证码 怎么用
滑块验证选中最左边，鼠标放着不要放，一直往右拉到底 就会显示验证通过了的。
