Skip to content

Commit

Permalink
换demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@liyincheng
liyincheng committed Jan 29, 2016
1 parent 89cfe3a commit 8ebdfd2
Showing 1 changed file with 98 additions and 94 deletions.
192 changes: 98 additions & 94 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,87 +3,68 @@
<head>
<meta charset="utf-8">
<style>
body, form, p{
margin: 0;
padding: 0;
}

.touch input,
.touch textarea{
color: #282828;
font-size: 16px;
margin-top: 25px;
height: 40px;
width: 240px;
padding: 0 20px;
border: 1px solid #cccccc;
box-shadow: 0 0 1px 0 #cccccc inset;
-webkit-appearance: none;
}

.touch input:first-child{
margin-top: 0;
}

.touch textarea{
padding: 10px 20px;
height: 70px;
margin-top: 25px;
}

input:focus,
textarea:focus
{
border: 1px solid #38cb7b !important;
box-shadow: 0 1px 2px #38cb7b;
outline: none;
}
body, p, form{
margin: 0;
}
.sign-up{
width: 328px;
color: #505050;
margin-left: 20px;
}
.sign-up label{
line-height: 150%;
display: block;
margin-top: 20px;
}
.sign-up input{
width: 100%;
padding: 0 15px;
height: 30px;
border: 1px solid #c8c8c8;
border-radius: 2px;
font-size: 14px;
font-family: "Lato Regular";
box-sizing: border-box;
}
.sign-up input.invalid {
border: 1px solid #f47575;
}
.sign-up input:focus{
outline: none;
border: 1px solid #38cb7b;
}
.sign-up input[type=submit]{
width: 100%;
background-color: #41ca7e;
height: 40px;
color: #fff;
font-size: 18px;
margin: 30px 0 30px 0;
cursor: pointer;
border-radius: 2px;
}

.touch{
border: 1px solid #e6e6e6;
background-color: #f8f8f8;
padding: 30px;
margin: 0 atuo;
width: 280px;
}
.touch ::-webkit-input-placeholder{
color: #ccc;
font-size: 13px;
}

.touch ::-moz-placeholder{
color: #ccc;
font-size: 13px;

}
.touch :-ms-input-placeholder{
color: #ccc;
font-size: 13px;
}

.touch input[type=submit]{
color: white;
background-color: #41ca7e;
height: 40px;
border: none;
font-size: 18px;
cursor: pointer;
width: 280px;
}
.touch input.invalid{
border: 1px solid #f47575;
}
.error{
position: absolute;
border: 1px solid #f0f0f0;
border-radius: 5px;
padding: 15px 10px;
background-color: white;
font-size: 14px;
color: #282828;
box-shadow: 0 0 20px #282828;
}
.error{
position: absolute;
border: 1px solid #f0f0f0;
border-radius: 5px;
padding: 15px 10px;
background-color: white;
font-size: 14px;
color: #282828;
box-shadow: 0 0 20px #282828;
}

.error:after{
content: "";
position: absolute;
top: -8px;
left: 10px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
}

.error:after{
content: "";
position: absolute;
Expand All @@ -93,7 +74,7 @@
border-right: 8px solid transparent;
border-bottom: 8px solid white;
}

.error:before{
content: "!";
display: inline-block;
Expand All @@ -109,7 +90,7 @@
margin-bottom: 5px;
vertical-align: middle;
}

.error span{
display: inline-block;
vertical-align: top;
Expand All @@ -119,24 +100,28 @@
</style>
</head>
<body>
<div class="touch">
<form class="cn">
<input type="text" placeholder="姓名" name="firstName" required="" value="" class="invalid">
<input type="email" t="email" value="" placeholder="电子邮箱" name="account" required="" class="invalid">
<input type="tel" t="tel" value="" placeholder="电话" name="phoneNum" required="" pattern="^[\d+#\-*]+$" pm="无效的电话号码">
<textarea placeholder="你好，告诉我你的需求" name="question"></textarea>
<input type="submit" class="send" id="get-touch" value="确定">
<form class="sign-up">
<label>邮箱地址</label>
<input type="email" name="account" t="email" required="">
<label>密码</label>
<input type="password" name="password" pattern=".{6,20}" pm="密码要在6到20位之间" required="">
<label>确认密码</label>
<input type="password" name="confirm-pwd">
<input id="confirm-sign" type="submit" value="注册">
<p></p>
</form>
</div>
<script src="http://s.xnimg.cn/ajax/zepto/zepto-1.1.0.all.min.js"></script>
<!--
<script src="./jquery-1.11.3.min.js "></script>
-->
<script src="./checkValidity.js"></script>
<script>
!function(){
var checkAccountExist = false;
function submit(){
console.log("表单验证成功，准备提交");
}
newFormCheck($(".touch form")[0], checkAccountExist, submit);
newFormCheck($(".sign-up")[0], checkAccountExist, submit);
}();

function checkAccountExist(failCallback, successCallback){
Expand All @@ -151,18 +136,37 @@
});
}

function checkPwdIdentity(){
if(this.form["password"].value !== this.form["confirm-pwd"].value){
return false;
}
return true;
}

function newFormCheck(form, checkAccountExist, submitHandler){
var checkRule = {}
var checkRule = {
"confirm-pwd": {
check: checkPwdIdentity,
msg: "两次密码输入不一致"
}
};
if(checkAccountExist){
checkRule.account = {
check: checkAccountExist,
msg: "账户已存在!",
async: true
};
}
if(checkAccountExist){
checkRule.account = {
check: checkAccountExist,
msg: "账号已存在，请登陆",
msg: "账号已存在",
async: true
};
}
return new Form(form, {
errorMsgClass: "error",
errorInputClass: "invalid",
errorMsgClass: "error", //错误提示框的类，用于自定义样式
errorInputClass: "invalid", //input无效的类名，用于自定义样式
rule: checkRule,
lang: "cn",
disableBrowserMsg: !(navigator.language || navigator.userLanguage).match(/cn/i)
Expand Down

0 comments on commit 8ebdfd2

Please sign in to comment.