content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
/* base */
html {
background-color: rgb(35, 31, 29);
font: 81.25%/1.25 arial, helvetica, sans-serif;
}
body {
margin: 0;
}
img {
max-width: 100%;
}
.hidden {
display: none;
}
.fl {
float: left;
}
.text-center {
text-align: center;
}
.p-bottom {
margin-bottom: 1em;
}
input[type=tel], input[type=text], input[type=email],
input[type=number] {
border: 1px solid #d9d9d9;
font-size: 1.3em;
}
input[type=tel]:hover, input[type=text]:hover,
input[type=email]:hover, input[type=number]:hover {
border: 1px solid #4d90f3;
}
/******** common *********/
.wrapper {
}
.header-bar {
background-color: rgb(35, 31, 29);
padding: 15px 15px 0;
text-align: center;
}
.header-bar > .inner, .main {
margin: 0 auto;
width: 80%;
max-width: 400px;
}
.signup {
color: #fff;
padding: 20px;
}
.signup .form-element {
margin-bottom: 15px;
}
.signup .form-element strong, .signup .form-element
span {
width: 100%;
display: inline-block;
margin: 0 0 .2em;
font-size: 1.2em;
}
.signup input[type=tel], .signup input[type=text], .signup
input[type=number], .signup input[type=email] {
width: 100%;
height: 33px;
box-sizing: border-box;
margin: 0px;
padding: 0 8px;
}
.signup input[type=tel], input[type=text],
input[type=number], input[type=email] {
width: 100%;
height: 33px;
box-sizing: border-box;
margin: 0px;
padding: 0 8px;
}
.signup input[type=checkbox] {
float: left;
margin: 0;
}
.accept-service .text {
margin-left: 20px;
font-size: .95em;
}
.btn {
color: #fff;
font-weight: bold;
text-align: center;
padding: 5px 10px;
border: 0;
}
.btn-submit {
background-color: rgb(117, 23, 23);
padding: 16px 80px;
-webkit-border-radius: 2px;
border-radius: 2px;
display: inline-block;
width: 255px;
height: 57px;
-webkit-appearance: none;
font-size: 1.7em;
}
/********* signup success *********/
.signup-success-info {
border: 1px solid #fff;
padding: 10px 15px;
}
.signup-success .name {
margin-top: 15em;
}
.signup-success .name p {
margin: .5em 0;
}
.input-error {
border: 1px solid #dd4b39;
}
.input-error::-webkit-input-placeholder { /* WebKit
browsers */
color: #dd4b39;
}
.input-error:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #dd4b39;
}
.input-error::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #dd4b39;
}
.input-error:-ms-input-placeholder { /* Internet Explorer
10+ */
color: #dd4b39;
}
.input-error:focus::-webkit-input-placeholder { /* WebKit
browsers */
color: #999;
}
.input-error:focus:-moz-placeholder { /* Mozilla Firefox 4
to 18 */
color: #999;
}
.input-error:focus::-moz-placeholder { /* Mozilla Firefox
19+ */
color: #999;
}
.input-error:focus:-ms-input-placeholder { /* Internet
Explorer 10+ */
color: #999;
}
.errormsg {
margin: .5em 0 0;
display: block;
color: #dd4b39;
line-height: 17px;
}
.input-error {
-webkit-animation: breath
}
@-webkit-keyframes breath {
from {
-webkit-box-shadow: 0px 0px 0px rgb(221, 75, 57)
}
to {
-webkit-box-shadow: 10px 10px 0px rgb(221, 75, 57)
}
}
method="post" id="signupform">
Name:
name="name" placeholder="Please enter your name *"
data-type="name" data-require="true"
data-message="This can't be empty"
value="@ViewBag.name" />
Mobile:
name="mobile" maxlength="10"
placeholder="Please enter your mobile *"
pattern="[0-9]*" data-type="phone"
data-require="true" data-message="This can't be
empty" />
Email:
name="email" placeholder="Please enter your email *"
data-type="mail" data-require="true"
data-message="This can't be empty" />
Postcode:
name="postcode" maxlength="4"
pattern="[0-9]*" placeholder="Please enter your postcode
*" data-type="post" data-require="true"
data-message="This can't be empty" />
value="true" data-type="check"
data-require="true" data-message="This can't be
empty" />
@ViewBag.Tick
value="Sign Up" name="submitbutton" class="btn
btn-submit" />
(function () {
function Validation(node, cfg) {
this.element = node;
this.inputs = Array.prototype.slice.call(this.element.querySelectorAll('[data-require="true"]'));
this.cfg = cfg || {};
//this.errorNum = 0;
this.cfg.rules = {
name: {
msg: 'Name should be 2-18 letters.',
rule: /^[a-zA-Z ]{2,18}$/
},
phone: {
msg: 'Mobile number should be 10 digits.',
rule: /^\d{10}$/
},
mail: {
msg: 'Please enter a correct email address.',
rule: /^[A-Za-z0-9._%+-]+@@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/i
},
check: {
msg: 'This must be chosen.',
rule: 'check'
},
post: {
msg: 'Postcode should be 4 digits.',
rule: /^\d{4}$/
}
}
this.groups = Array.prototype.slice.call(node.getElementsByClassName('form-element'));
if (this.inputs.length === 0) return;
this._init();
}
Validation.prototype = {
constructor: Validation,
_event: function () {
var self = this;
self.element.addEventListener('focusin', function
(e) {
var target = e.target;
if (getRequireValue.call(target)) {
//removeClass(target, 'input-error');
// target.classList.remove('input-error');
self._removeAlert(target);
}
});
self.element.addEventListener('focusout', function
(e) {
var target = e.target,
rule,
value;
if (getRequireValue.call(target)) {
self._validate(target);
}
});
self.element.addEventListener('change', function
(e) {
var target = e.target,
rule,
value;
if (target.type == 'checkbox') {
if (getRequireValue.call(target)) {
if (target.checked) {
//removeClass(target, 'input-error');
// target.classList.remove('input-error');
self._removeAlert(target);
}
}
}
});
self.element.addEventListener('submit', function
(e) {
e.preventDefault();
var errorNum = self.validate();
// debugger;
if (errorNum == 0) {// 发送请求
ajax(self.cfg.urls.sendInfoUrl,
serializeForm(self.element), function (data) {
// debugger;
data = eval('(' + data + ')');
if (data.result == 'success') {
data = data.content;
if (getType(data) == 'array') {
if (data.length == 0) {
//跳转
location.href = self.cfg.urls.successUrl;
} else {
data.forEach(function
(item, index) {
//alert(item.type);
var input =
document.querySelector('[data-type="' + item.type + '"]');
input.value = '';
//alert(input.value);
self._validate(input, item.msg);
});
}
}
}
});
}
})
},
_createAlert: function (target, msg) {
var parentNode = target.parentNode,//label,
self = this,
div;
debugger;
target.classList.add('input-error');
if
(parentNode.getElementsByClassName('errormsg').length == 0) {
div = document.createElement('div');
div.innerText = msg;
div.className = 'errormsg';
parentNode.appendChild(div);
}
},
_removeAlert: function (target) {
var parentNode = target.parentNode;
target.classList.remove('input-error');
var msgs = parentNode.getElementsByClassName('errormsg');
for (var i = 0, len = msgs.length; i < len; i++) {
msgs[i].parentNode.removeChild(msgs[i]);
}
},
_getRule: function (node) {
var type = node.getAttribute('data-type'),
self = this,
t,
rule = { msg: '', rule: '' };
for (t in this.cfg.rules) {
if (t == type &&
this.cfg.rules.hasOwnProperty(type)) {
rule = this.cfg.rules[type];
break;
}
}
return rule;
},
_validate: function (target, msg) {
var self = this,
rule = self._getRule(target),
value = target.value,
errorNum = 0;
// if(rule.rule == 'check'){ //勾选
// if(target.checked == false){
// addClass(target, 'input-error');
// self._createAlert(target, rule.msg);
// }
// }else{
// if(rule.rule && !rule.rule.test(value)){
// addClass(target, 'input-error');
// self._createAlert(target, rule.msg);
// }
// }
if ((rule.rule == 'check' && target.checked
== false) || (rule.rule !== 'check' && !rule.rule.test(value))) {
//addClass(target, 'input-error');
target.classList.add('input-error');
self._createAlert(target, msg || rule.msg);
errorNum++;
}
return errorNum;
},
validate: function () {
var self = this,
errorNum = 0;
self.inputs.forEach(function (input, index) {
errorNum += self._validate(input);
})
return errorNum;
},
_init: function () {
var self = this;
self._event();
}
}
new Validation(document.getElementById('signupform'), {
urls: {
sendInfoUrl: '/Home/Valid',
successUrl: '/Home/Success'
}
})
function getRequireValue() {
return eval(this.getAttribute('data-require')) == true;
}
function getMessage() {
return this.getAttribute('data-message');
}
function ajax(url, data, successFn, failFn) {
var oAjax = new XMLHttpRequest();
oAjax.open('POST', url, true);
oAjax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8");
oAjax.send(data);
oAjax.onreadystatechange = function () {
if (oAjax.readyState == 4) {
if (oAjax.status == 200) {
successFn && successFn(oAjax.responseText);
} else {
failFn && failFn();
}
}
}
}
function getType(obj) {
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
//表单序列化
function serializeForm(whichForm) {
var parts = new Array();
var field = null;
for (var i = 0, len = whichForm.elements.length; i <
len; i++) {
field = whichForm.elements[i];
switch (field.type) {
case "select-one":
case "select-multipe":
for (var j = 0, optLen =
field.options.length; j < optLen; j++) {
var option = field.options[j];
if (option.selected) {
var optValue = "";
if (option.hasAttribute) {
optValue =
(option.hasAttribute("value") ? option.value : option.text);
}
else {
optValue =
(option.attributes["value"].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
break;
case undefined:
case "file":
case "submit":
case "reset":
case "button":
break;
case "radio":
case "checkbox":
if (!field.checked) {
break;
}
default:
parts.push(encodeURIComponent(field.name) +
"=" + encodeURIComponent(field.value));
}
}
return parts.join("&");
}
})();
发表于 2015-05-08 10:44:38
回复(1)
1174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
