这是程序代码,实现的功能就是username文本框,如果没有填写数据就弹出一个错误的提示。
这是文本框
<input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" />
弹出是窗口代码。
var username=$("#username").val();
if(username==''){
function showErrorMsg(msg){
$.confirm({
title: '错误',
content: msg,
type: 'red',
typeAnimated: false,
buttons: {
omg: {
text: '知道了',
btnClass: 'btn-red',
}
}
});
}
按照重复的代码可以抽象出来处理的原则。进行第一次优化。文本框不变。弹出式窗口进行抽象成一个JS方法。
//显示错误信息
function showErrorMsg(msg){
$.confirm({
title: '错误',
content: msg,
type: 'red',
typeAnimated: false,
buttons: {
omg: {
text: '知道了',
btnClass: 'btn-red',
}
}
});
}
```javascript
var username=$("#username").val();
if(username==''){
showWarningMsg('请填写用户名');
return;
}
进一步简化方案;在文本框class中增加required属性。增加tips显示要弹出的内容。
<input type="text" placeholder="请输入您的用户名" class="form-control required" name="username" id="username" tips="请填写用户名"/>
增加遍历有required的文本框,调用js方法,传递tips内容。
//遍历文本框
function checkForm(){
$(".required").each(function(i,e){
if($(e).val()==''){
showWarningMsg($(e).attr('tips'));
return false;
}
})
return false;
}
调用过程进一步优化
<script type="text/javascript">
$(document).ready(function(){
$("#submit-btn").click(function(){
if (!checkForm())return;
var username=$("#username").val();
var password=$("#password").val();
var cpacha=$("#cpacha").val();
});
})
经过以上步骤的优化,页面代码已经减少很多,可读性也很好。代码的优化是一个学习技术的过程。通过不断追求代码的优化提高技术水平和能力。