Form表單
hey ~ 我是肥陽，後期會持續更新，請記得點贊支持喲css
項目中的表單咱們經常使用的要素有：姓名、身份證號、手機號、獲取驗證碼
此文主要用到了 vue、 ajax 、layer 及 正則表達式
話很少說，直接上代碼html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>Form表單</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<style>
*{
box-sizing: border-box;
}
body{
margin:0;
background:#fff;
}
img{
vertical-align:top; // 解決img間距問題
}
div.contain{
padding:0 15px;
}
div.item{
position:relative;
height:50px;
}
div.item:after{
display: block;
content: " ";
box-sizing: border-box;
border-bottom: 1px solid #e3e2e2;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
input{
width:100%;
height:100%;
border:none;
outline: none;
font-size:16px;
color:#333;
}
input::-webkit-input-placeholder{
color: #999;
font-size: 16px;
}
input::-moz-input-placeholder{
color: #999;
font-size: 16px;
}
input::-ms-input-placeholder{
color: #999;
font-size: 16px;
}
div.flex{
display:flex;
align-items:center;
justify-content: space-between;
}
div.flex input{
flex:1;
}
button{
border:0;
// 重置button樣式
// 若是設置爲border:none;會發現當你再寫border:1px solid #ccc;時button原有樣式並未爲覆蓋
outline:none;
background:transparent;
border-radius:20px;
}
button.code{
padding:0 10px;
height:30px;
font-size:12px;
color:#3880F9;
border:1px solid #3880F9;
}
button.code:disabled{
border-color:#CCC;
color:#CCC;
}
button.save{
margin-top:40px;
width:100%;
height:45px;
color:#fff;
font-size:16px;
<!--背景過渡-->
background:linear-gradient(to right,#4AB4FF,#2D7CF9);
background:-webkit-gradient(linear,left top, right top,from(#4AB4FF),to(#2D7CF9));
background:-webkit-linear-gradient(left,#4AB4FF,#2D7CF9);
background:-o-linear-gradient(left,#4AB4FF,#2D7CF9);
box-shadow:#B9DFFE 0 0.10666667rem 0.53333333rem;
}
button.save:disabled{
background:#e9e9e9;
color:#CCC;
border:1px solid #e3e2e2;
}
</style>
</head>
<body>
<div id="app">
<img src="banner.png" alt="banner" width="100%" height="auto">
<div class="contain">
<div class="item">
<input type="text" placeholder="申請人姓名" v-model.trim="form.name">
</div>
<div class="item">
<input type="text" placeholder="申請人身份證號" v-model.trim="form.identity_id">
</div>
<div class="item">
<input type="tel" maxlength="11" placeholder="申請人手機號" v-model.trim="form.phone">
</div>
<div class="item flex">
<input type="tel" maxlength="6" placeholder="手機驗證碼" v-model.trim="form.sms_code">
<button class="code" :disabled="getCodeDisabled" @click="getCode">{{getCodeText}}</button>
</div>
<button class="save" :disabled="formInvalid" @click="send">保存並申請</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
form: {
name: '',
identity_id: '',
phone: '',
link: '',
sms_code: '',
user_code: '',
code: '',
},
getCodeDisabled: true,
getCodeText: '獲取驗證碼',
org: '',
},
watch: {
// deep 默認爲false; 表明是否深度監聽
'form.phone': { handler: 'checkCodeDisabled', deep: true },
},
computed: {
formInvalid() {
return !this.form.name || !this.form.identity_id ||
!this.form.phone || !this.form.sms_code;
},
},
methods:{
getFormData(p) {
const params = p;
<!--時間戳-->
params.timestamp = Math.round(new Date().getTime() / 1000);
params.org_code = this.org;
params.org_id = this.org;
const data = new FormData();
data.append('app_id', 4);
data.append('table', 'business');
data.append('param', JSON.stringify(params));
data.append('m', 'CardSdk');
return data;
},
<!--獲取驗證碼-->
checkCodeDisabled(val) {
this.getCodeDisabled = !val;
},
countDown(s) {
const that = this;
if (s === 0) {
that.getCodeText = '獲取驗證碼';
that.getCodeDisabled = false;
return;
}
that.getCodeDisabled = true;
that.getCodeText = `${s}秒後重發`;
setTimeout(() => {
that.countDown(s - 1);
}, 1000);
},
getCode() {
if (this.form.phone.length !== 11) {
layer.msg('請輸入正確的手機號');
return;
}
const msg = {
phone: this.form.phone,
};
const Info = this.getFormData(msg);
Info.append('action', 'send_sms');
const that = this;
that.getInfo(Info, (res) => {
if (res.code === 0) {
that.getCodeDisabled = true;
that.countDown(60);
layer.msg('發送成功');
return;
}
layer.msg(res.msg);
});
},
<!--ajax提交表單-->
getInfo(dates, callback) {
$.ajax({
type: "POST",
dataType: "json",
async: true,
contentType: false,
processData: false,
url: 'xxxx',
data: dates,
success: function (res) {
callback(res);
},
error: function () {
layer.msg('接口異常');
},
});
},
<!--正則驗證-->
buyCheck() {
const tel = 11 && /^1[0-9]{10}$/;
const name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
const card = /^[1-9][0-9]{5}[1-9][0-9]{3}((0[0-9])|(1[0-2]))(([0|1|2][0-9])|3[0-1])[0-9]{3}([0-9]|X|x)$/;
if (!name.test(this.form.name)) {
layer.msg('請填寫正確的姓名');
return false;
}
if (!card.test(this.form.identity_id)) {
layer.msg('請填寫正確的身份證號');
return false;
}
if (!tel.test(this.form.phone)) {
layer.msg('請填寫正確的手機號碼');
return false;
}
return true;
},
<!--提交-->
send() {
if (!this.buyCheck()) {
return;
}
const Info = this.getFormData(this.form);
Info.append('action', 'order_add');
const that = this;
that.getInfo(Info, (res) => {
if (res.code === 0) {
window.location.replace(res.info);
return;
}
layer.msg(res.msg);
});
},
}
})
</script>
</body>
</html>
複製代碼
相關文章
- 1. form 表單 Django form表單
- 2. 簡單form表單
- 3. form表單
- 4. django Form表單
- 5. antd form表單
- 6. Form表單
- 7. Day3 Form表單
- 8. Django Form表單
- 9. Django form表單
- 10. HTML form 表單
- 更多相關文章...
- • jQuery Mobile 表單 - jQuery Mobile 教程
- • Thymeleaf表單 - Thymeleaf 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • 算法總結-廣度優先算法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. form 表單 Django form表單
- 2. 簡單form表單
- 3. form表單
- 4. django Form表單
- 5. antd form表單
- 6. Form表單
- 7. Day3 Form表單
- 8. Django Form表單
- 9. Django form表單
- 10. HTML form 表單