Valide、bootStrap知识点总结
- 表单校验
| 校验类型 |
取值 |
描述 |
| required |
true|false |
必填字段 |
| |
“@”或者”email” |
邮件地址 |
| url |
|
路径 |
| date |
数字 |
日期 |
| dateISO |
字符串 |
日期（YYYY-MM-dd） |
| number |
|
数字（负数，小数） |
| digits |
|
整数 |
| minlength |
数字 |
最小长度 |
| maxlength |
数字 |
最大长度 |
| rangelength |
[minL,maxL] |
长度范围 |
| min |
|
最小值 |
| max |
|
最大值 |
| range |
[min,max] |
值范围 |
| equalTo |
jQuery表达式 |
两个值相同 |
| remote |
url路径 |
ajax校验 |
<form action="#" method="get" id="formid">
<table width="60%" height="60%" align="center" bgcolor="#ffffff">
<tr>
<td colspan="3">会员注册USER REGISTER</td>
</tr>
<tr>
<td width="20%">用户名:</td>
<td width="80%"><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repassword" id="repassword"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" name="usertelephone" id="email"></td> </tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男" checked="checked"> 男
<input type="radio" name="sex" value="女" />女
<!--<label for="sex" class="error"></label>-->
<label for="sex" class="error"></label>
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="checkcode">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
<script src="js/jquery-1.11.0.js" ></script>
<!--validate校验库-->
<scriptsrc="js/jquery.validate.js" ></script>
<!--国际化库，中文提示-->
<script src="js/messages_zh.js" ></script>
<script type="text/javascript">
$(function(){
$("#formid").validate({
rules: {
username:"required",
password:{
required:true,
rangelength: [3,6]
},
repassword:{
equalTo: "#password"
},
email: "email",
sex:"required"
},
messages: {
username:"用户名不能为空！",
password:{
required:"密码不能为空！",
rangelength: "密码长度在{0}~{1}之间"
},
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: '/Login/CheckUserTelephoneEmail',//验证地址
data:{userTelephone:$('input[name="usertelephone"]').val() }
},message: '手机号已被注册',//提示消息
delay: 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
},
}
})
})
</script>
1、bootStrap响应式页面
教程：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
bootstarp的入门
1.下载bootstarp
网站:http://www.bootcss.com/
下载:用于生产环境的 Bootstrap
(参考官网的全局css样式)
2.导入bootstarp.css
3.导入jquery.js
4.导入bootstrap.js
5.添加一个meta标签 支持移动设备
<meta name="viewport" content="width=device-width, initial-scale=1">
6.将所有的内容放入到布局容器中.
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类
方式1:
<div class="container"></div>
方式1:
<div class="container-fluid"></div>
注意:
bootstrap将每一行分成12份
媒体查询:
假如大屏幕,每行显示6个
超大电脑,屏幕分辨率>1200 使用: col-lg-2
假如屏幕小点,每行显示4个
992<屏幕分辨率<1200 使用: col-md-3
再小点,每行显示2个
768<屏幕分辨率<992 使用: col-sm-6
继续小,每行显示1个
屏幕分辨率<768 使用:col-xs-12