javascript - 使JS Alert看起来更专业

有人可以帮我使此警报看起来更好吗？就像也许分开了每个文本框都单独一行？我不知道如何使它看起来更整洁，而不仅仅是全部堆积在一条线上。

要查看警报，请单击“留置权”单选按钮，然后单击下一步而不填充文本框

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()">

最佳答案

您可以使用换行符\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/

关于javascript - 使JS Alert看起来更专业，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26555768/