javascript - 让 JS Alert 看起来更专业

Question

有人可以帮我让这个警报看起来更漂亮吗？就像 Maybe split up 每个文本框各占一行？我想不出如何让它看起来更干净，而不是全部堆在一条线上。

要查看警报，请点击 Lien 单选按钮，然后在不填写文本框的情况下点击下一步

http://jsfiddle.net/t4Lgm0n2/9/

function validateForm(){
	var QnoText = ['lien'];  // add IDs here for questions with optional text input
	var ids = '';
	flag = true;
	for (i=0; i<QnoText.length; i++) {
		CkStatus = document.getElementById(QnoText[i]).checked;
		ids = QnoText[i]+'lname';
        var eD = "";
		if (CkStatus && document.getElementById(ids).value == '') {
			eD = eD+' lienholder name';
			document.getElementById(ids).focus();
			flag = false;
		}
		ids2 = QnoText[i]+'laddress';
		if (CkStatus && document.getElementById(ids2).value == '') {
			eD=eD+' lienholder address';
			document.getElementById(ids2).focus();
			flag = false;
		}
		ids3 = 'datepicker2';
		if (CkStatus && document.getElementById(ids3).value == '') {
			eD=eD+' lien date';
			document.getElementById(ids3).focus();
			flag = false;
		}
        if(eD!="") alert("Please enter "+eD);
	}
  return flag;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="Yes" name="lien" id="lien" required="yes" onchange="showhideForm(this.value);"/><label for="lien">Lien</label>

&nbsp;&nbsp;&nbsp;<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>

<script type="text/javascript">
function showhideForm(lien) {
    if (lien == "Yes") {
        document.getElementById("div1").style.display = 'block';
        document.getElementById("div2").style.display = 'none';
    } 
   else if (lien == "None") {
        document.getElementById("div2").style.display = 'block';
        document.getElementById("div1").style.display = 'none';
		$("#div1 > .clearfix input:text").val("");
    }
}
</script>

<div id="div1" style="display:none">
<div class="clearfix">
<label for="lname">Lienholder Name:</label>&nbsp;&nbsp;&nbsp;
            <input type="text" name="lienlname" validateat="onSubmit" validate="maxlength" id="lienlname" size="54" maxlength="120" message="Please enter lienholder name." value="">
            </p>
            <p>
            <label for="laddress">Lienholder Address:</label>
            <input type="text" name="lienladdress" validateat="onSubmit" validate="maxlength" id="lienladdress" size="54" maxlength="120" message="Please enter lienholder address." value="">
            </p>
            <p>
            <label for="ldate">Date of Lien:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" name="lienldate" id="datepicker2" mask="99/99/9999" value="">
                </div>
                </div>
                <div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
                <input type="submit" name="submit" value="Next" onclick="validateForm()">

Answer 1

可以使用换行符\n使文本更具可读性:

var eD = [];

if (CkStatus && document.getElementById(ids).value == '') {
    eD.push('Please enter lienholder name');
    document.getElementById(ids).focus();
    flag = false;
}

// ...

if (eD.length) alert(eD.join('\n'));

如您所见，我还将错误消息推送到 ed 中数组，这使得使用 .join() 连接结果消息更加方便方法。

演示:http://jsfiddle.net/t4Lgm0n2/11/